State változók használata

Amikor egy értéket szeretnénk megőrizni, frissíteni az alkalmazásban, akkor jön képbe a state változók használata.

A legegyszerűbben megfogalmazva, képzeljük azt el, hogy van a kódban valahol egy változó. Nem akarjuk, hogy ennek értéke elvesszen. Sőt néha azt szeretnénk, hogy ezt a változót használni tudjuk más widget-ekben is. Vagyis az adat „utazzon” az alkalmazáson belül. Ehhez az utazáshoz a változó útlevele a state változók használata.

StatefulWidget

Az első és legfontosabb, hogy a state változók kezeléséhez mindenképpen StatefulWidget-re van szükség.

Egyszerű számláló példa

Legyen egy olyan változónk, amivel valamit számolunk. Mondjuk akár kattintásokat (pontosabban a mobil alkalmazásban érintéseket, angolul tap vagy touch), vagy akár bármi mást. De a lényeg, hogy ennek a változónak a tartalmát akarjuk megjegyezni és nem elveszíteni addig, amíg az appot használjuk.

StatefulWidget-en belül kell tehát létrehozni ezt a változót:

class _MyScreenState extends State<MyScreen> {
  var szamlalo = 0;

Aztán tegyük fel, hogy valahol van egy gombunk, amire kattintva növelni akarjuk ennek a számlálónak az értékét:

MyButton(
  buttonText: myText,
  onTap: () {},
);

Lényegtelen most, hogy milyen gomb widgetről van szó. Van neki egy felirata (buttonText) és van egy onTap tulajdonsága. Az onTap-ban adjuk majd át azt a kezelő függvényt, ami elvégzi az érintés / kattintás után a számláló értékének növelését.

Jelenleg az onTap egy teljesen üres névtelen függvényt hív / tartalmaz, csak hogy a fordító ne jelezzen hibát.

A számlálást kezelő függvény

Most kell jönnie annak a függvénynek, ami a számlálást elvégzi. Mindig egyel fogjuk növelni a számláló értékét:

  var szamlalo = 0;

  void szamlaloNovel() {
      szamlalo++;
  }

Nos ez a függvény valóban növeli a szamlalo értékét, de ahhoz, hogy ez az érték meg is maradjon, a setState metóduson belül kell a növelést elvégezni:

  void szamlaloNovel() {
    setState(() {
      szamlalo++;
    });
  }

Ezzel már kaptunk egy olyan state változót, ami megőrzi az appon belül az értékét.

Utolsó lépésként meg kell hívnunk a számláló növelését elvégző függvényt, vagyis lecseréljük a gombnál az onTap-ban hívott üres névtelen függvényt:

MyButton(
  buttonText: myText,
  onTap: szamlaloNovel,
);

Figyelem! Nem azt írjuk, hogy szamlaloNovel(), mert ez azonnal meghívná a függvényt. Helyette csak a függvény nevét kell megadni, ami a függvényre mutató hivatkozás.

És egyébként ennyi, készen is vagyunk :).