A LayoutBuilder egy olyan widget, ami felépít / létrehoz egy widget fát, aminek méretét a szülő widget méretének befolyásolja.
Használat
Egy widgetnek a build metódusában adjuk meg:
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: builder) {Van egy builder paramétere, ami egy függvényt vár értékként. Ez a függvény automatikusan megkapja a context objektumot és egy constraints objektumot:
Ebben a pillanatban még semmi változás nem látszik a képernyőn, de a függvény belsejében már hozzáférünk a constraints objektumhoz:
Ez az objektum megmondja nekünk, hogy milyen korlátozások jönnek a szülő widgettől a fában.
Például ilyen a minWidth, maxWidth, minHeight, maxHeight.
Ezek ismeretében pontosan tudjuk, hogy mennyi hely áll rendelkezésre és ez alapján el tudjuk dönteni, hogy melyik elrendezés (layout) a legmegfelelőbb.
Ez egy marha jó dolog, mert ez alapján készíthetünk egy olyan widgetet, amit bárhol a widget fában használni tudunk és ezt a widgetet nem érdekli a teljes képernyő szélessége vagy magassága. Nem érdekli a képernyő orientáció (fekvő, álló). Csak az érdekes számára, hogy ennek az adott widgetnek mennyi a rendelkezésére álló magasság és szélesség, és ez az ami a constraints objektumból jön.
Dinamikus layout
Ezen infók alapján dinamikusan tudjuk a layoutot változtatni.
A LayoutBuilder mindig újrakalkulálja ezeket a constraints értékeket attól függően, hogy hová helyezzük a widget fában, vagy képernyő tájolástól függően.
Eltároljuk például a szélességet:
final width = constraints.maxWidth;És felhasználjuk arra, hogy feltételtől függően jelenítsünk meg tartalmat:
Column(
children: [
if (width >= 600)
Row(
children: [],
)
else
TextField(Itt egy Column widget gyerekeinek (children) megjelenítését vezéreljük listán belül egy if-fel, aminek az a jellegzetessége, hogy a hagyományos if-el ellentétben nem használunk { }-ket!
A LayoutBuilder akkor segítség tehát, ha olyan widgetről van szó, aminek méretezése nem az egész képernyőtől függ, hanem inkább csak a szülő widget méreteitől.