Flutter Navigation Push und Pop Part 1

Ich habe in diesem Blog schon einmal über das Routing geschrieben. Das ist jetzt schon eine Weile her und da ich selten Gebrauch davon machen musste, ist es Zeit das Wissen ein wenig aufzufrischen.
Das wichtigste vorneweg: In Flutter besteht ein Bildschirm aus mindestens einem, meistens aus mehreren, miteinander verbundenen Widgets. Der Name des ersten (oder alleinigen) Widgets dieses Bildschirms, ist auch gleichzeitig der Bildschirm Name. Das ist insofern wichtig, da uns Flutter die Möglichkeit bietet, mit Hilfe der Namen zu navigieren.

Stapelverarbeitung

Dabei organisiert Flutter seine Bildschirme von Haus aus, als ein Stapel. Wenn man sich einen Stapel Bildschirme vorstellt, ist der oberste in diesem Stapel,  jeweils der Bildschirm, den wir sehen.
Möchten wir auf einen anderen Bildschirm navigieren, müssen wir den Ziel Bildschirm auf diesen Stapel packen, was Flutter dann .push nennt.
Möchten wir einen Bildschirm zurück gehen in diesem Stapel müssen, wir den obersten Bildschirm entfernen, das nennt sich dann .pop .

Die Möglichkeiten zwischen Bildschirmen zu navigieren ist in Flutter ein Teil des "Material" Systems. Damit wir dieses nutzen können, müssen wir mit einer MaterialApp arbeiten.

void main()=> runApp(MeineApp());

class MeineApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "/":(BuildContext context) => HomeSeite(),
        "/DritteSeite":(BuildContext context) => DritteSeite(),
        "/VierteSeite":(BuildContext context) => VierteSeite(),
      },
    );
  }
}

Im Code oben werden in der MaterialApp bei routes: die entsprechenden Screen's mit dem Namen  eingetragen. "/" ist insofern ein Spezialfall, als es Bezeichnung für den ersten Bildschirm verwendet werden muss, während wir bei den weiteren Screen's frei sind in der Namensgebung.

MaterialApp und Routing

Die MaterialApp hat routes betreffend folgende mögliche Einträge:

• home: Das hier eingetragene Widget ist normalerweise, das erste Widget das dargestellt wird, wenn die App startet. Wir dürfen entweder home: verwenden oder "/", aber nicht beides !
• initialRoute: Der erste Screen der dargestellt wird, wenn der Navigator aufgebaut wird (kommen wir gleich dazu)
• onGenerateRoute: wir gehen in Part 2 darauf ein
• onUnknownRoute: wir gehen in Part 2 darauf ein

Im Code oben haben wir Benannte routes implementiert. Das heisst, sie sind fest im Code integriert. Die andere Variante in diesem Zusammenhang, wäre ganz auf einen Eintrag zu verzichten. Um die entsprechenden Seiten aufzurufen, kann man zum Beispiel folgenden Code verwenden:

RaisedButton(
              child: Text("Zweite Seite"), 
              onPressed: () {
                Route route = MaterialPageRoute(builder: (context)=>ZweiteSeite());
                Navigator.push(context, route);
              },
            ),
            RaisedButton(
              child: Text("Dritte Seite"), 
              onPressed: () {
                Navigator.pushNamed(context, "/DritteSeite");
              },
            )

Die ZweiteSeite wird ohne Eintrag in die MaterialApp aufgerufen unter Verwendung von MaterialPageRoute. Für die DritteSeite Seite verwenden wir den Eintrag in der MaterialApp.

Bei beiden Varianten kommt das Navigator Widget zum Einsatz. Für die erste Variante .push, hier hatten wir ja die route schon vorher generiert und der Variable route zugewiesen, Navigator.push.
Die zweite Variante erwartet als Argument unseren Eintrag in der MaterialApp, Navigator.pushNamed.

RaisedButton(
              child: Text("Zurück"), 
              onPressed: () {
                Navigator.pop(context);
              },
            ),

Mit dem Beispiel Code oben, kehren wir im jeweiligen Seiten Widget wieder auf die HomeSeite zurück. Wir können dabei Navigator.pop verwenden, alleinig mit dem context als Argument.
Den ganzen Quellcode findet man auf GitHub und zwar hier ! Unten noch ein kurzes Video Demo. Bis Bald !