Beim ersten Beispiel von BoxDecoration, habe ich das ganze mit einem StatelessWidget umgesetzt. Nun etwas ähnliches in einem Stateful Widget. Wir fügen dem Beispiel ein Icon hinzu, welches man anclicken kann. Bei jedem anclicken, wird die
BoxDecoration leicht geändert. Die BoxDecoration ist in diesem Beispiel in einer eigenen
Funktion:
Dieser Funktion werden zwei double Werte übergeben, die dann beim setzen des Offsets für den Schatten zur Anwendung kommen. Wir definieren als erstes einen Rand und setzen mit
BorderStyle sein Erscheinungsbild, in diesem Fall "solid". Die Farbe, die abgerundeten Ecken und die Definition eines Schattens folgen danach. Da sich diese Funktion rein um die BoxDecoration kümmert, kann sie im Hauptprogramm immer wieder eingesetzt werden, was auch heißt bei Bedarf zentral geändert werden. Sollte man zwei oder drei Varianten benötigen, dann schreibt man einfach die entsprechenden Funktionen. Dieses Prinzip lässt sich aber, je nach Struktur des Programms, nicht immer umsetzen. In diesem Fall gibt die Funktion ein BoxDecoration Objekt zurück, welches wir im Hauptprogramm weiterverwenden können.
Stateful Widget - das geheime Wesen
Eine App besteht oft aus Stateful und Statless Widgets. Ein Stateless Widget wird einmal ausgeführt und die visuellen Komponenten von ihm, werden auf den Bildschirm gebracht. Während der Laufzeit wird diese Ausführung nicht wiederholt.
Wenn wir uns das Rumpfgebilde eines StatefulWidgets ansehen, bemerken wir als erstes, die Erzeugung eines "State". Mit override überschreiben wir die ursprüngliche, "eingebaute"
createState() Funktion mit unserer eigenen und erzeugen ein State Objekt._BeispielState enhält anschließend eine Instanz dieses State Objekts. Wir erweitern dann, das State Objekt unseres Widgets um diese Instanz. Mit Widget build folgt der Code für das Widget an sich. Dieser Coder wird, mit Änderungen, immer wieder ausgeführt..dazu gleich mehr.
Hier sehen wir, das gleich zwei double Variablen definiert werden. Die Funktion neueBox() enthält die setState Methode, welche die Variablen ändert und danach Flutter anweist, das Widget neu zu erstellen. Das ursprüngliche Beispiel habe ich um einen
IconButton erweitert:
Eintrag, welche beim Click auf den Stern, die Funktion neueBox aufruft. Man beachte das mit mneueBox die BoxDecoration initialisert wird. Den Code für dieses Beispiel findet man
hier.
Kommentare
Kommentar veröffentlichen