From 2eaab576c8ac7957d52cd06328d410a659df1757 Mon Sep 17 00:00:00 2001 From: Jonas Franz Date: Thu, 13 Jan 2022 17:29:58 +0100 Subject: [PATCH] Add stateless and stateful widgets --- chapters/basics/flutter.tex | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/chapters/basics/flutter.tex b/chapters/basics/flutter.tex index f21e40f..246e3d3 100644 --- a/chapters/basics/flutter.tex +++ b/chapters/basics/flutter.tex @@ -20,7 +20,7 @@ class ExampleWidget extends StatelessWidget { @override Widget build(BuildContext context) { - return const Text('Hello World'); + return const Row(children: [Text('Hello World'), Text('123')]; } } \end{lstlisting} @@ -44,7 +44,17 @@ Das Konzept des Widgets, welches bereits öfters bisher erwähnt worden ist, wir \subsection{Widgets} -Eines der wichtigsten Bestandteile des Flutter-Frameworks sind die sogenannten Widgets. Der Satz \textquote[{\cite[Kap.1.9]{flutterinaction}}]{Everything is a widget} wird in der Literatur oft verwendet, und bringt gut zum Ausdruck, dass Flutter das Konzept des Widgets für viele Anwendungsfälle nutzt. So kann ein Widget diverser Aufgaben übernehmen wie beispielsweise das Rendern einer UI-Komponente, Animationen oder das anordnen von anderen Widgets. +Eines der wichtigsten Bestandteile des Flutter-Frameworks sind die sogenannten Widgets. Der Satz \textquote[{\cite[Kap.1.9]{flutterinaction}}]{Everything is a widget} wird in der Literatur oft verwendet, und bringt gut zum Ausdruck, dass Flutter das Konzept des Widgets für viele Anwendungsfälle nutzt. So kann ein Widget diverser Aufgaben übernehmen wie beispielsweise das Rendern einer UI-Komponente, Animationen oder das anordnen von anderen Widgets. Zur Darstellung der Benutzeroberfläche benutzen also Widgets Kompositionen von diversen Widgets. So lassen sich beispielsweise mit einer \texttt{Row}, wie im \autoref{lst:dartExample} zu sehen ist, mehrere Widgets nebeneinander anzeigen. + +\begin{lstlisting}[caption={Vereinfachte Darstellung eines Widgets als Methode \cite{flutterinaction}}, label={lst:widgetFunction}] +UI Widget(state) TODO +\end{lstlisting} + +Ein wichtiger Unterschied zu klassischen deklarativen UI-Frameworks ist, dass Widgets nur die Anleitung zum Bauen einer Benutzeroberfläche beinhalten, jedoch nicht den aktuellen Zustand des Widgets. Im Detail bedeutet dies, dass die \texttt{build()}-Methode eines Widgets keinerlei Nebeneffekte haben sollte und daher eine schnelle Ausführungzeit zu erwarten ist. Bildlich lässt sich ein Widget als Funktion darstellen, welche den aktuellen Zustand (engl. State) erhält und daraus die entsprechende Benutzeroberfläche generiert wie in \autoref{lst:widgetFunction} vereinfacht dargestellt. Ein Widget erhält die darzustellenden Daten und generiert daraus die entsprechende Benutzeroberfläche. + +In Flutter wird bei Widgets grundsätzlich zwischen \texttt{StatelessWidget} und \texttt{StatefulWidget} unterschieden. + +Ein \texttt{StatelessWidget} hat grundsätzlich keinen veränderbaren Zustand. Dies heißt, dass alle Klassenvariablen unveränderlich sein sollen. In Dart wird dies mit dem Modifikator \texttt{final} gekennzeichnet. Daraus wird impliziert, dass alle Informationen zum Zustand des Widgets aus den im Konstruktor übergebenen werten stammen müssen. Somit wird das Widget nur neu gebaut, wenn sich Änderungen an den Werten des Konstruktors durch Änderungen in der Hierarchie darüber liegenden Widgets ergeben. Was ist Flutter?