-
Notifications
You must be signed in to change notification settings - Fork 2
03. Widgets
Die UI einer Anwendung wird im Code beschrieben. Dazu verwendet das Framework Widgets als Grundlage, die dann in Kombination die UI bilden. Das bedeutet, jedes Widget beschreibt einen Teil des UI und es gibt keine Aufteilung in Views, Models, Layouts und Controller, da diese Bestandteile alle in dem Widget Objekt vereint werden.
Ein Widget kann wiederum aus weiteren Widgets bestehen. Es bündelt Logik, Interaktion und Darstellung innerhalb eines Objekts. Bekannte und oft benötigte Interaktionen wie Buttons, Listen etc. gibt es bereits als vorgefertigte Widgets in Flutter. Auch die Anwendung selbst ist letztendlich ein Widget, die App UI kann als Widget Tree bezeichnet werden.
Um den Zusammenhang zum State herzustellen, kann man auch sagen, dass Widgets beschreiben, wie ihr View mit der aktuellen Konfiguration und dem State aussieht. Das bedeutet, ein Widget ist eine visuelle Komponente oder eine Komponente, die mit dem visuellen Aspekt einer Anwendung interagiert.
Beim Schreiben von neuen Widgets werden Subklassen von StatelessWidget oder StatefulWidget erstellt, je nachdem, ob das jeweilige Widget einen State managen soll oder nicht. Die Hauptaufgabe eines Widgets ist es, die Funktion build() zu implementieren. Widgets sind immer immutable, unabhängig davon, ob sie Stateless oder Stateful sind.
Der BuildContext wird in jeder build() Funktion als Variable übergeben und verweist auf die Position eines Widgets in der Baumstruktur aller erstellten Widgets. Er enthält Informationen über jeden Vorfahren des aktuellen Widgets und ist ein einfacher Weg, auf alle Vorfahren zuzugreifen.
Stateless Widgets sind die grundlegendste und häufigste Art von Widgets. Sie werden einmal mit Parametern initialisiert, die sie vom Elternwidget bekommen und speichern diese in finalen Variablen. In der build() Funktion werden die gespeicherten Werte dann genutzt, um neue Parameter für die Widgets abzuleiten, die es erzeugt. Außerdem können die Werte für das Styling verwendet werden.
Stateful Widgets bestehen immer aus zwei Teilen: einem immutable Widget und einem mutable State. Das Widget ist hierbei dafür verantwortlich, am State festzuhalten. Das State Objekt erstellt mit den veränderlichen Daten das eigentliche UI Element und hat eine lange Lebensdauer, da es während der Rebuilds oder bei dem Ersetzen des dazugehörigen Widgets weiterhin bestehen bleibt. Aus Performancegründen sollten jedoch so wenig Stateful Widgets wie möglich eingesetzt werden.
Wird die Funktion setState() aufgerufen, so wird Flutter mitgeteilt, dass sich etwas geändert hat. Daraufhin wird die build() Funktion des Widgets neu ausgeführt, was das Widget neu rendert, damit die Änderungen dargestellt werden.
Inherited Widgets sind eine Möglichkeit, Daten von der Spitze des Widget-Baums allen Nachfahren zugänglich zu machen. Sie werden vor allem in verschiedenen Bibliotheken verwendet.