Tartalom feltételes renderelése

A tartalom feltételes renderelése azt jelenti, hogy a képernyőn megjelenő tartalmat valamilyen feltételtől függően jelenítjük meg / rejtjük el.

Például különböző képernyőket (widgeteket) akarunk megjeleníteni egy gombnyomástól függően.

Van tehát két képernyő, gyakorlatilag két widget. Az egyik alapértelmezetten jelenik meg. Ehhez létre kell ennek hoznunk egy változót. Például:

var activeScreen = const StartScreen();

Hol is hozzuk ezt létre?

Mivel változást kell kezelnünk, mindenképpen StatefulWidget-en belül kell lennie. Tehát kb. így:

class _QuizState extends State<Quiz> {
  var activeScreen = const StartScreen();

Írunk egy olyan metódust, ami cserélni tudja a képernyőket / widgeteket, tehát az activeScreen változó tartalmát:

  void switchScreen() {
    setState(
      () {
        activeScreen = QuestionsScreen();
      },
    );
  }

A QuestionsScreen egy másik widget.

A VSCode az activeScreen = QuestionsScreen() egyenlőségnél pirossal aláhúzza a QuestionsScreen()-t. Ennek oka az, hogy amikor az activeScreen változónak először értéket adtunk, akkor a színfalak mögött ő felvette annak a widgetnek a típusát, amit bele töltöttünk. Magyarul az activeScreen változó StartScreen típusú lett. Ez pedig nem egyezik meg a QuestionsScreen „típussal”.

A megoldás egyszerű, egy kicsit „megengedőbbé” tesszük a változóba tölthető tartalmat azzal, hogy Widget-re változtatjuk meg az activeScreen típusát:

Widget activeScreen = const StartScreen();

Aztán valahol például egy Container widget child tulajdonságába töltjük az activeScreen tartalmát. És ez azért lesz teljesen érvényes, mert a child maga is egy Widget típusú adatot, egy widgetet vár.

A másik út

Ha az egyszerű megoldásoknál akarunk maradni, akkor pont jól jön a három operandusú, azaz ternari operátor, mely itt kerül bemutatásra egy praktikus példán keresztül