Flutter -- Tutorial Teil 2 State und Co

Im ersten Teil dieses Tutorials sind wir schon auf ein paar Begriffe gestoßen, die für Flutter wichtig sind. Da wären Widgets, MaterialApp, und was mit extends, also eine Klasse erweitern, gemeint ist.
Wir sollten uns noch einmal in Erinnerung rufen, das wir eine moderne Anwendung grob unterteilen können. Code der die Benutzeroberfläche erstellt und verwaltet und Code, der den Nutzwert des Programmes umsetzt. Eine Taschenrechner App braucht ebenso eine Benutzeroberfläche, wie eine Wetter App. Der Teil des Codes der den Nutzwert der App ermöglicht, dürfte aber sehr unterschiedlich sein. Taschenrechner und Wetter App benötigen wahrscheinlich Buttons, eventuell Bilder und ganz sicher Text.

Das heisst vieles was man in Richtung Benutzeroberfläche programmiert, ist eventuell nicht nur in einem Projekt brauchbar. Sondern könnte, mit Anpassungen, in einem anderen wiederverwendet werden. Diese Erkenntnis führt zu dem Versuch den Code des Userinterfaces, von dem Code für die Business Logik zu trennen.

Wieso ist das wichtig ?

Am Anfang eigentlich noch überhaupt nicht. Später wird diese Problematik immer wichtiger. Wer sich von Anfang an Gedanken über die Struktur seiner Anwendung macht, spart sich auf lange Sicht viel Arbeit.
Flutter stellt uns zur Programmierung der Benutzeroberfläche Widgets, Datenobjekte, zur Verfügung.
Streng betrachtet sind diese Widgets Klassen, die wir erweitern, anpassen und für unsere Zwecke einsetzen. Zwei der wichtigeren Widgets sind das Stateful Widget und das Stateless Widget.

Screen

Das Bild links repräsentiert einen Bildschirm einer Anwendung. Eine Anwendung kann natürlich mehrere Bildschirme haben.
Dieser Bildschirm hat veränderliche Elemente und unveränderliche. Ein veränderliches Element ist zum Beispiel ein Button, auf den der Benutzer tapen oder, mit einer Tastatur, klicken kann. Ein Text, der je nach Situation angepasst bzw erneuert werden muss, ein Bild das ausgetauscht werden muss und und und.

Alles was wir auf dem Bildschirm zur Laufzeit des Programmes nicht mehr ändern möchten, oder alle Elemente von denen wir keinen Input entgegen nehmen, gehören zu den unveränderlichen Teilen des Bildschirms.

Nicht veränderlich = Stateless Widget  veränderlich = Stateful Widget

Das ist zugegebenermaßen eine sehr vereinfachende Erklärung. Aber wenn man die ersten Schritte in Flutter unternimmt durchaus angebracht.

Ein Stateful Widget hat einen State, also eine Möglichkeit eine Veränderung, einen Userinput zum Beispiel, zu verarbeiten. Wenn ein User einen Input macht ändert sich etwas. Wenn sich etwas ändert, müssen wir den State, den Zustand, des Widgets anpassen.

Das Stateful Widgets bietet uns dazu die setState() Methode. In ihr ändern wir das, was wir an dem Widget ändern möchten und veranlassen Flutter dieses Widget und alle ihm nachfolgenden  Widgets neu aufzubauen. Hier stoßen wir dann auch gleich auf die erste Problematik.

Ist unser Stateful Widget, das oberste Widget in unserer Baumhierarchie, dann wird mit jedem setState() alles neu aufgebaut. Bei einem komplexen Userinterface kann das sehr viel Leistung kosten. Natürlich gibt es auch für diese Problemlage Lösungsansätze, aber dazu mehr in einem anderen Post.

Kommen wir aber noch einmal zurück zur Einleitung dieses Posts. Der Einsatz eines Stateful Widgets bedeutet auch immer, das eine Logik integriert wird. Wenn sich der State ändert, was machen wir ? Wechseln wir auf einen neuen Bildschirm ? Ändern wir Komponenten des Bildschirms, aber bleiben auf ihm ?
Wenn wir also den Code für das Userinterface und die Businesslogik trennen möchten, müssen wir soweit als möglich schon vor der ersten Zeile Code wissen, wie unsere App funktionieren soll.

State, State Management sind Begriffe die in Flutter eine große Bedeutung haben. In der Praxis nimmt ihre Bedeutung mit zunehmender Projektgröße zu.
Ich habe jetzt nicht viele Worte über das Stateless Widget verloren. Das heisst nicht, das es unwichtig , oder weniger wichtig, ist.
Da aber mit diesem Widget in der Regel keine Programmlogik programmiert wird, ist vor allem am Anfang der Unterschied zu dem Stateful Widget wichtig.

Das Thema selbst ist aber komplexer und die Grenzen nicht immer so eindeutig. Im nächsten Post werden wir dann auch wieder mit Code Beispielen arbeiten.  Das war es für diesen Post. Happy Coding !