2.1 Einführung (inkl. Theorie zu Widgets)
Suchen Sie sich zuerst eine:n Partner:in, weil es sich bei dieser App um das erste Pair Programming Projekt handelt. Wir empfehlen folgende Gruppenaufteilung:
- Eine Person stellt auf einem Computer die Inhalte dieser Webseite dar, denkt über die Lerninhalte nach und kontrolliert den von der anderen Person geschriebenen Code.
- Die andere Person kopiert/schreibt auf einem Computer den Code und führt die App aus.
Hinweis
Gedanken zu Copy-Paste
In diesem Kapitel müssen Sie relativ viel Programmcode copy-pasten. Die Idee dahinter ist, dass App-Entwicklung ein schrittweiser Prozess ist und man oft nicht auf fixfertige Vorlagen zurück greifen kann, die man nur noch mit Inhalten befüllen muss. Das copy-pasten von Code gehört zum Alltag von vielen Software-Entwickler:innen. Damit Ihr Lernerfolg möglichst hoch ist, empfehlen wir Ihnen aber auch über den kopierten Code nachzudenken und unsere Erläuterungen zu lesen.
Einige der Code-Beispiele setzen fortgeschrittenes Programmierwissen voraus. Es kann also gut möglich sein, dass Sie nicht auf Anhieb allen Code verstehen, da wir bewusst auf gewisse Erklärungen verzichtet haben. Keine Bange, Sie müssen nicht allen Code verstehen. Die wichtigen Lerninhalte haben wir in die Theorieboxen und Quiz gepackt. Schauen Sie sich dieses Projekt mehr als Motivation an, was mit Flutter und objektorientierte Programmierung alles möglich ist. Viele der vorgestellten Konzepte werden Sie anhand von Apps in Kapitel 3 und 4 noch vertiefen.
Was ist das Ziel?
Sie werden eine einfache Rezepte-App erstellen (Fooby lässt grüssen). Als Vorlage werden Sie die Flutter Demo-App benutzen und Widgets wie ListView und Slider kennenlernen. Diese Widgets sind nützlich wenn man die Benutzeroberfläche einer App als Reaktion auf Benutzereingaben aktualisieren möchte. Da Sie gerade erst anfangen, Flutter zu lernen, wird Ihre App eine hartkodierte Liste mit Rezepten verwenden. Das Slider-Widget wird dazu dienen, die Menge an Zutaten basierend auf der Portionenmenge neu zu berechnen.
Theorie
Widgets
Die zentrale Idee hinter Flutter ist es, die Benutzeroberfläche einer App aus Widgets zu erstellen. Jedes Element auf dem Bildschirm einer Flutter-App entspricht einem Widget. Die Auswahl und Reihenfolge von Widgets im Programmcode bestimmt schlussendlich die Struktur der App. Es gibt zwei Arten von Widgets:
- Stateless Widgets: Widgets, welche ihren Zustand während der Laufzeit nicht ändern können. Das bedeutet, dass solche Widgets während die App läuft nicht neu gezeichnet werden können, z.B. die Widgets Icon oder Text.
- Stateful Widgets: Widgets, welche ihren Zustand während der Laufzeit ändern können. Solche Widgets sind dynamisch, d. h. sie sind veränderlich und können während ihrer Laufzeit neu gezeichnet werden, z.B. die Widgets Slider oder Checkbox.
Neue App erstellen
In Abschnitt 1.3 haben Sie bereits gelernt wie man ein neues App-Projekt erstellt. Folgen Sie den gleichen Schritten und wählen Sie als Projektnamen z.B. rezepteapp. Wenn Sie den Programmcode ausführen sollten Sie als Ausgabe dieselbe Demo-App wie in Abschnitt 1.3 sehen:
