05. Cheatsheet
Die wichtigste Ressource zur Bearbeitung der Aufgaben ist die Flutter API Referenz Dokumentation. Hier lassen sich alle Bestandteile von Flutter nachschlagen (Widgets, properties, functions, etc.)
In Aufgabe 1 könnt ihr in erster Linie testen, wie man das Styling von UI Elementen mit HTML und CSS auf Flutter übertragen kann. Das Ziel ist es, eine Bildergalerie aus der String Liste _urls im gegebenen GridView zu erstellen.
Ihr könnt die gesamte Aufgabe im itemBuilder lösen. Dieser kann ein Widget zurück geben, welches wiederum das eigentliche Bild als Kind-Widget enthält (z.B. Container). Das Bild kann mit Image.network(_urls[index]) aufgerufen werden.
Wie ihr die bekannten Konzepte aus HTML und CSS in Flutter übertragen könnt, könnt ihr hier nachlesen.
In der zweiten Aufgabe sollt ihr fünf Buttons implementieren. Drei Buttons sollen die drei festen Größen für die Endgeräte darstellen, zwei weitere Buttons sollen ein "+" und "-" für die Konfigurierbarkeit der Größen sein. Wichtig ist hier vor allem, dass ihr den Widget Tree versteht und umsetzen könnt.
Zur Anordnung untereinander ist das Widget Column nützlich, welches eine children Array Property hat.
Zur horizontalen Anordnung mehrerer Buttons dient das Widget ButtonBar, was die Property alignment und ein children Array beinhaltet.
Zur Darstellung von Buttons gibt es verschiedene Möglichkeiten, beispielsweise RaisedButton Widgets oder FlatButton Widgets. Die Buttons können ihrer child Property ein Icon Widget haben, das direkt auf Material Design Icons zugreift (z.B. mit Icon(Icons.icon_name)).
In der dritten Aufgabe sollen die implementierten Buttons nun mit einer Funktionalität versehen werden. Die Variable _size wird im Text Widget dargestellt und hat aktuell immer den Wert 100. Bei jedem Button Click soll sich der Wert von _size ändern. Bei den drei festen Größen sollen die Werte in 320, 720 und 1080 geändert werden (für Smartphone, Tablet und Desktop), bei "+" und "-" soll von dem aktuellen Wert von _size jeweils 1 addiert oder subtrahiert werden. Diese Aufgabe soll dabei helfen, zu verstehen, wie die Kommunikation von sich ändernden Daten zwischen verschiedenen Widgets in einem StatefulWidget funktioniert.
Hier muss innerhalb der Buttons die entsprechende Funktion aufgerufen werden. Außerdem muss die Funktion geschrieben werden.
Die Funktion kann über die Property onPressed innerhalb der Button Widgets aufgerufen werden.
Wiederholung: Wird die Methode setState() aufgerufen, so wird Flutter mitgeteilt, dass sich etwas geändert hat. Daraufhin wird die build() Methode des Widgets neu ausgeführt, was das Widget neu rendert, damit die Änderungen dargestellt werden.