Generieren von Widgets in Flutter
Im Zusammenhang mit Widgets in Flutter stellt sich immer wieder die Frage, wie geht man am besten vor. Vor allem dann, wenn man mehrere Widgets der gleichen "Art" hat.
Daten werden oft in Listen verwaltet und einige der Layout Widgets basieren auf dem Listen Format.
Die Widgets Column(...) und Row(...) erwarten ihre Kinder als eine Liste von Widgets. Wie man sich also diesbezüglich organisiert und welche Strategie man dabei verfolgt, dürfte ein wichtiger Punkt sein. Hier ein kleiner Beispiel Code, wie es auch funktionieren kann. Dabei behaupte ich nicht es sei die beste Variante...
Im Code oben haben wir eine Funktion meineWidgets(...). Als erstes erstellen wir eine Liste von Farben. Anschliessend machen wir uns die .generate Möglichkeit bei Listen zu Nutze. Generate müssen wir die Anzahl übergeben, die wir erzeugen wollen. In diesem Beispiel 4.
Die index Variable wird während des Generierens verwendet. Wir verwenden sie auch, um jedem Widget eine Farbe zu zu weisen.
Die Funktion gibt anschließend meineContainer als Liste vom Typ Widget zurück. An entsprechender Stelle im Code, können wir mit children:meineWidgets(), die generierte Liste einbauen. Bis bald !
Daten werden oft in Listen verwaltet und einige der Layout Widgets basieren auf dem Listen Format.
Die Widgets Column(...) und Row(...) erwarten ihre Kinder als eine Liste von Widgets. Wie man sich also diesbezüglich organisiert und welche Strategie man dabei verfolgt, dürfte ein wichtiger Punkt sein. Hier ein kleiner Beispiel Code, wie es auch funktionieren kann. Dabei behaupte ich nicht es sei die beste Variante...
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | List<Widget> meineWidgets(){ List<Color> meineFarben = [Colors.blue,Colors.brown,Colors.green,Colors.yellow]; List<Widget> meineContainer = new List<Widget>.generate(4, (index){ return Container( height: 100.00, width: 100.00, color: meineFarben[index], ); }); return meineContainer; } |
Im Code oben haben wir eine Funktion meineWidgets(...). Als erstes erstellen wir eine Liste von Farben. Anschliessend machen wir uns die .generate Möglichkeit bei Listen zu Nutze. Generate müssen wir die Anzahl übergeben, die wir erzeugen wollen. In diesem Beispiel 4.
Die index Variable wird während des Generierens verwendet. Wir verwenden sie auch, um jedem Widget eine Farbe zu zu weisen.
Die Funktion gibt anschließend meineContainer als Liste vom Typ Widget zurück. An entsprechender Stelle im Code, können wir mit children:meineWidgets(), die generierte Liste einbauen. Bis bald !
Kommentare
Kommentar veröffentlichen