Die Flutter Anwendungen zeigen ihre Inhalte in einer Art „Fullscreen-Containers“ auf einem Bildschirm – pages (oder screens, oder views).
Diese pages und screens werden in Flutter als Routs (Routen) bezeichnet.
In Android werden diese pages/screens als Activity bezeichnet, und in iOS als ViewController. Aber im Flatter sind die Routen auch Widgets.
Ein einzelnes Widget kann Route sein, wenn er einen vollständigen Layout darstellt.
Eine Route (ein Bildschirm) kann in Dart – im Sinne des OOP-Konzeptes – als eine „Klasse“ beschrieben werden.
Deswegen kann jede Route – als eine separate Klasse – über eigene Inhalte und eine eigene UI (Benutzeroberfläche) verfügen.
Möglichkeiten für Navigation in Flutter:
(A) einfache Navigation zwischen zwei Routen (push & pop)
(B) Navigation zwischen zwei benannten Routen (named Routs)
(C) Navigation zwischen zwei Routen mit onGenerateRoute()
(D) Navigation mit weichen Übergang zwischen zwei Routen (animiert)
(E) deep Links
Link zu offizieller Documentation –> über Navigation in Flutter
Link zum thematischen Artikel —> Navigation System in Flutter
(A) einfache Navigation zwischen zwei Routen:
1. Erstellen Sie zwei Routen.
2. Navigieren Sie mit der Methode Navigator.push() zur zweiten Route.
1 2 3 4 5 6 7 8 | onPressed: () { Navigator.of(context).push( context, MaterialPageRoute( builder: (context) => SecondScreen(); ), ), } |
3. Kehren Sie mit der Methode Navigator.pop() zur ersten Route zurück.
1 | onPressed: () => Navigator.pop(context) |
Ein weiteres Beispiel für Verwendung des Navigator-Widgets ist hier: https://www.geeksforgeeks.org/routes-and-navigator-in-flutter/?ref=rp
(B) Navigation zwischen zwei benannten Routen:
1. Erstellen Sie zwei Routen.
2. Die Eigenschaft home des Widgets MaterialApp mit der Eigenschaft initialRoute (mit dem Wert ‚/‘) ersetzen . Darunter eine weitere Eigenschaft route mit Wert verwenden:
1 2 3 4 5 6 | //alternativ: initialRoute: 'A', routes: { 'A': (context) => const FirstScreen(), 'B': (context) => const SecondScreen(), }, |
3. Im Navigator mit benannten Routen rufen wir MaterialPageRoute nicht mehr auf, sondern verwenden direkt die Methode .pushNamed(context, ‚route‘).
onPressed: () => Navigator.pushNamed(context, ‚/second‘),
// alternativ: Navigator.of(context).pushNamed(‚B‘);
4. Und wie bei einfachen Navigator mit Navigator.pop() zur ersten Route zurückkehren.
onPressed: () => Navigator.pop(context),
comming soon:
(C) Navigation zwischen zwei Routen mit onGenerateRoute()
(D) Navigation mit weichen Übergang zwischen zwei Routen (animiert)
(E) deep Links