StatefulWidget

A StatefulWidget egy olyan widget, aminek vannak olyan adatai (state), melyek meg tudnak változni és ez a változás hatással van a képernyőn megjelenő tartalomra.

Gondoljunk arra, amikor egy gombbal kattintunk és ennek hatására változik valami a képernyőn.

Amikor tehát egy state megváltozik, akkor a widget újra renderelődik és a képernyőn látható felhasználói felület frissül.

Létrehozás

Egy StatefulWidget definíciója így néz ki:

class MyWidget extends StatefulWidget {
//...
}

A VSCode nyújt nekünk egy rendkívül hasznos segítséget, amit ha sokat készítünk widgetet, akkor imádni fogunk. Ehhez előzetesen telepíteni kell a Flutter kiegészítőt.

Ezek után elég csak begépelni azt a két betűt, hogy st, és a VSCode feldobja a lehetőségeket:

Ha kiválasztjuk a Flutter StatefulWidget lehetőséget, akkor a VSCode generál nekünk egy „üres” widget-et, amit csak át kell nevezni és kidolgozni:

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

Miért Stateful?

Ahogy a neve is mutatja, lehetővé teszi, hogy a widget-en belül állapotokat kezeljünk. De mit is jelent ez pontosan?

Maradjunk az angol elnevezésnél: a state egyszerűen egy adat, ami időről-időre változhat és hatással van a renderelt felhasználói felületre, egyszerűbben megfogalmazva a képernyőn megjelenő tartalomra, vagy annak egy részére. Magyarul, ha az adat (state) változik, akkor a képernyő is változik.

StatefulWidget életciklusa

Minden Flutter Widget, így a StatefulWidget is rendelkezik egy belső életcilussal. Azaz egy csapat metódus van, amit a Flutter automatikusan futtat egy bizonyos időben.

Három különböző életciklus metódus van:

• initState(): ezt a Flutter akkor futtatja, amikor a StatefulWidgetnek a State objektuma inicializálódik
• build(): ezt akkor futtatja a Flutter, amikor a Widget felépül, azaz megjelenik a widget fában (látható lesz a képernyőn is) az első alkalommal és miután a setState() metódus hívásra került
• dispose(): rögtön az előtt futtatja a Flutter, mielőtt a Widget törlésre kerül

StatelessWidget

Meg kell említeni a másik gyakori widget típust, a StatelessWidget-et, ami ellentétben a StatefulWidget-tel, egy olyan widget, ami csupán adatokat fogad és megjelenít valamit a képernyőn, de állapota nem változik, nem frissíti a képernyőt.