Flutter -- Tutorial Teil 1 Grundsätzliches

Flutter ist das SDK von Google für die Entwicklung von App's für mobile Geräte. Ich gehe hier nicht auf die Installation ein, da gibt es genügend Ressourcen im Netz, angefangen mit der offiziellen Seite.
Als IDE verwende ich Visual Studio Code, aber die Code Beispiele sollten, auch anstandslos in Android Studio laufen, beide übrigens kostenlos erhältlich. Ich persönlich habe beide installiert. Android Studio ist die ausgefeiltere Entwicklungsumgebung und hat mit den Möglichkeiten rund um den Android Emulator ein klares plus. Ich verwende trotzdem meistens Visual Studio Code, da das Programm auf meinem System im Vergleich weitaus schneller läuft.

Flutter - Grundsätzliches

Wer im Netz über Flutter recherchiert, wird ohne Zweifel auf den Begriff Widget stoßen. Real betrachtet handelt es sich dabei um Datenstrukturen, häufig ineinander verschachtelt. In der Flutter Welt konzipiert man eine Anwendung unter Verwendung dieser Widgets. Die Programmiersprache hinter Flutter ist Dart, ebenfalls aus dem Hause Google. Es wird zwar oft behauptet, man benötige keine Vorkenntnisse in Dart, was Flutter angeht. Für die ersten Schritte mag das auch zu treffen. Wer aber ein tieferes Verständnis von Flutter entwickeln möchte, wird nicht darum herumkommen, sich mit Dart und objektorientierter Programmierung zu befassen.
Ohne gewisse Kenntnisse was objektorientierte Konzepte betrifft, wird es schwierig gewisse Codebeispiele zu verstehen. Es sei noch erwähnt das der grosse Vorteil von Flutter ist, das sich mit einem Code Anwendungen programmieren lassen, die sowohl auf Android, wie auch auf Apple Geräten laufen.

Flutter - Boilerplate Code

Wer in Visual Studio Code oder Android Studio ein neues Projekt anlegt, also die Software die Ordnerstruktur erstellen lässt, erhält automatisch einen Beispielcode vorgesetzt. Dieser Boilerplate Code genannte Programm generiert ein kleines Beispiel, was mit Flutter möglich ist.

Zu Beginn wird die Bibliothek material.dart importiert. Sie stellt verschiedene Widgets für die Programmierung eins User Interfaces zur Verfügung.

Der Einstiegspunkt in das Programm ist die main() Funktion. Wenn wir den Code überfliegen sehen wir die ersten Widgets. StatelessWidget, MaterialApp, ThemeData, Zusätzlich begegnen wir das erste mal class extends und @override. Diese zeigen an, wie stark das objektorientierte Prinzip in Flutter verankert ist, ähnlich wie bei Dart auch.
In der Zeile mit der main() Funktion wird in einer Shorthand Variante, eine Eigenheit von Dart, mit runApp die MyApp Klasse aufgerufen.
Dabei ist diese Klasse eine Erweiterung von StatelessWidget.

Was heißt es aber genau, eine Klasse zu erweitern ?  

Kurz: Wir fügen neues hinzu und behalten das ursprüngliche. Dabei können wir auch bestehende Elemente der Klasse verändern bzw überschreiben, was wir im weiteren Verlauf auch tun und im Vorfeld mit @override anzeigen.

Wir bauen etwas oder zu was ist build und context gut ?

In der Flutter Welt wird ein Widget gebaut und befindet sich immer in einer Umgebung, sprich einem context. Wenn man sich ein Flutter Programm als Baum vorstellt, dann definiert der context, wo in diesem Baum, das Widget verankert ist. Die build Funktion erzeugt so einen context, verankert also das Widget in der Baumstruktur. Dabei ist der retournierte context immer ein anderer, als der context des Widgets welches die build Funktion aufgerufen hat.

In unserem Beispiel Code retourniert der build Aufruf ein MaterialApp Widget, welches wir mit weiteren Daten versehen haben.

Titel der App, mit ThemeData Informationen zur Farbwahl und mit home: einen Verweis auf unser MyHomePage Widget.

Fazit: Schon wenige Zeilen Code reichen aus um einen Einblick in das Konzept von Flutter zu erhalten. Auf der einten Seite haben wir Widgets, Datenstrukturen, auf der anderen Seite einen context, in welchem diese Widgets eingebunden sind. Den kompletten Code erhält man, wie bereits erwähnt, wenn man ein neues Projekt anlegt. Also ruhig einmal im Android Emulator laufen lassen!