Seitennavigation mit Flutter

Seitennavigation mit Flutter

Einfache Version

Eine Mobile App besteht zumeist aus mehreren Seiten / Views, die ein Nutzer betreten kann. Auch mit Flutter kann man seine App so strukturieren, dass man seine einzelnen Views als Pages darstellt. Dies ist auch grundsätzlich zu empfehlen, da man sonst schnell in eine unübersichtliche Code-Hölle kommt.

Aber wie navigiert man in Flutter von einer Seite zur nächsten?

1. Definition der Routen

Zunächst benötigen wir in unserer App die Definition der Routen, die wir anspringen wollen. Diese können wir wie im Gist beschrieben anlegen.

Hier empfiehlt es sich immer Konstanten für die Routen Strings anzulegen, welche dann zentral verwaltet werden. Da wir nun Routen zu unseren einzelnen Seiten haben, schauen wir uns als nächstes an, wie wir diese ansteuern können.

2. Route pushen

In unsere Seite selbst können wir nun über die Klasse Navigator einfach eine neue Route pushen. Dies sieht wie folgt aus:

Navigator.pushNamed(context, #Routen Name#);

Die Navigator-Klasse besitzt noch weitere Methoden, um auf das Routing zu reagieren und somit vor und zurück zu navigieren.

Erweiterte Version - Routing mit Transitions

Wenn man nicht nur den Standard Flutter Seitenübergang wünscht, sollte man sich die Bibliothek page_transition anschauen. Diese ermöglicht es, verschiedene Transitions für seinen Seitenwechsel hinzuzufügen, die dann auch noch schön aussehen.

Hierzu müssen wir unseren bisherigen Code nur geringfügig anpassen. Im Gist kann man genau sehen was sich geändert hat:

Im ersten Gist haben wir eine Liste an Routen definiert. Im zweiten benutzen wir die Callback Methode onGenerateRoute, um die Routing-Settings zu definieren. Hierzu verwenden wir von der Bibliothek bereitgestellte Methoden zum Setzen der Transition, wenn eine unserer Routen eintrifft. Im Beispiel wäre dies ein Seitenübergang von Links nach Rechts.

return PageTransition(child: PlanPage(), type: PageTransitionType.leftToRight)`;

Nun können wir uns einfach zwischen Seiten unserer App hin und her bewegen und dies auch noch mit schönen Animationen begleiten.