Flutter -- Beispiel 5 Bildschirmwechsel

Es wird Zeit für ein neues Flutter Beispiel. Diesmal geht es um den Wechsel von einem Bildschirm zum nächsten. Es mag Apps geben die kommen nur mit einem Bildschirm aus. Sobald aber der Zweck der App umfangreicher wird, benötigt man oft

einen weiteren, oder mehrere.Wie meistens, aber besser immer, macht man sich schon zu Beginn, Gedanken über die Struktur des eigenen Codes. In diesem Fall greifen wir zu mehreren Files, was aber nicht zwingend notwendig ist, aber die Übersichtlichkeit steigert. Ebenfalls im Hinterkopf behalten sollte man die Benennung für die Files und die eventuell verwendeten Variablen.

Der Code im main File ist simpel. Wir importieren die material.dart package und das File hauptbildschirm. Auf oberster Ebene unseres Widget-Baumes ist ein Stateless Widget, welches ein MaterialApp Widget retourniert. Dieses "Material Widget" bekommt Titel und eine Farbe übergeben. Desweiteren definieren wir den "Homescreen" mit dem home-Eintrag "Hauptbildschirm()".  Ziemlich wenig Code bis jetzt, oder ?
Wer mehr zu den einzelnen Elementen, MaterialApp, ThemeData etc, wissen möchte, besucht am besten flutter.io. Wie schon ein paar mal in diesem Blog erwähnt, ist die Dokumentation zu Flutter gut und ausführlich.
Mit "home: Hauptbildschirm()" haben wir der MaterialApp einen Eintrag für unseren ersten Bildschirm übergeben. Weiter geht es nun mit dem Code dazu.

Als erstes fällt auf, das wir ein weiteres File haben, "zweiterbildschirm". Für dieses kleine Flutter Beispiel benötigen wir total drei Files. Main.dart, welches den Einstiegspunkt für die App darstellt,
hauptbildschirm.dart, welches den ersten Screen erzeugt und zweiter-
bildschirm.dart. Hier beim File hauptbildschirm definieren wir ein StatelessWidget mit einem Scaffold. Dieser Scaffold, der im übertragenen Sinne, eine Grundfunktionalität für die App zur Verfügung stellt, welche man in verschiedenster Hinsicht nutzen kann, aber nicht muss. Diesem Scaffold wird eine AppBar übergeben, welche wiederum einen IconButton erhält, hier das Icons.menu. Flutter stellt eine grosse Anzahl an Icons zur Verfügung. Man beachte das Menu Icon, wie auch das Search Icon, welches der AppBar ebenfalls übergeben werden, eine "onPressed:" Funktionalität haben. Diese wird in unserem Beispiel, aber nicht weiter genutzt.
Icons.search wird der AppBar als Teil einer Liste für den "actions:" Konstruktor übergeben. Am Schluss fügen wir der AppBar noch einen Body hinzu, welches einen "RaisedButton" enthält. Die eigentliche Weiterleitung zur nächsten Seite, ist dann in der "onPressed" Funktionalität zu finden. Navigator.push und MaterialPageRoute, spielen dabei die Hauptrolle. Die Teile des Codes, wie Center, Text, TextStyle, beeinflussen die Darstellung. Der Code Teil für ZweiterBildschirm ist simpel, aber für ein Demo ausreichend.

Er stellt nur einen Titel zur Verfügung, hat aber, Scaffold sei Dank, oben links einen Back Button. Hier aber noch einmal zurück zum Thema, Strukturierung einer App. Wie man sich gut vorstellen kann, wird eine umfangreiche App, wesentlich mehr Code enthalten. Allein das Layout, je nach dem wie aufwendig es ist, kann zu einem kleinen Code "Meer" anwachsen. Sich im Vorfeld Gedanken über Namensgebung und Strukturierung zu machen, erspart einem im Falle des Falles viel Ärger.

Hier gibts die Fortsetzung! und hier geht es zum nächsten Beispiel! 
  Follow @Darkdust1