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, alle anderen Elemente könnt ihr aber beliebig hinzufügen und stylen, wie ihr wollt (z.B. Untertitel hinzufügen, Schriftfarbe ändern, Padding, Hintergrundfarbe etc.).
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.
Folgende Widgets können genutzt werden:
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, 768 und 1024 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.
Zusätzlich könnt ihr auf dem Screen von Aufgabe 2 weitere Buttons implementieren, die die Navigation zu Aufgabe 1 und zur Startseite ermöglichen, ähnlich wie die Buttons zur Navigation bei Aufgabe 1 unten rechts und links.
Mit der Property alignment des Widgets ButtonBar könnt ihr ausdrücken, dass die Buttons rechts und links auf dem Screen angeordnet werden sollen. Die Navigation funktioniert über den Navigator und ist hier ausführlich beschrieben.