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?

Erste (einfache) Möglichkeit

Mit

Navigator.of(context).push(MaterialPageRoute(builder: (context) => NeueSeite()));

kann man leicht auf eine Neue Seite wechseln. Für mehr Übersicht empfehlen sich jedoch die

folgenden Schritte:

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.

class MyApp extends StatelessWidget {
  final materialApp = MaterialApp(
    title:UIData.appName,    
    theme:ThemeData(        
      primaryColor:Colors.green,       
      fontFamily:UIData.quickFont,       
      primarySwatch:Colors.amber),    
    home:HomePage(),    
    initialRoute:null,    
    routes:<String, WidgetBuilder>{
      UIData.homeRoute: (BuildContext context) =>HomePage(),
      UIData.citiesRoute: (BuildContext context) =>CitiesPage(),
      UIData.twitter: (BuildContext context) =>TwitterPage(),
      UIData.teamRoute: (BuildContext context) =>TeamsPage(),
      UIData.planRoute: (BuildContext context) =>PlanPage(),
      UIData.quizRoute: (BuildContext context) =>QuizPage(),
      UIData.impressionRoute: (BuildContext context) =>ImpressionPage(),  
  );
    
  @override
  Widgetbuild(BuildContext context) {
    return materialApp;  
  }
}
    
classUIData {
  //routes
  static const String homeRoute ="/home";
  static const String teamRoute ="/teams";
  static const String planRoute ="/plan";
  static const String citiesRoute ="/cities";
  static const String twitter ="/twitter";
  static const String quizRoute ="/quiz";
  static const String impressionRoute ="/impression";
}

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] (https://pub.dev/packages/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:

class MyApp extends StatelessWidget {  
  final materialApp = MaterialApp(    
    title: UIData.appName,    
    theme: ThemeData(        
      primaryColor: Colors.green,        
      fontFamily: UIData.quickFont,       
      primarySwatch: Colors.amber),    
    home: HomePage(),    
    initialRoute: null,    
    //routes    
    onGenerateRoute: (RouteSettings settings) {      
      switch(settings.name) {        
        case '/plan': {          
          return PageTransition(child: PlanPage(), type: PageTransitionType.leftToRight);        
        }        
        case '/teams': {          
          return PageTransition(child: TeamsPage(), type: PageTransitionType.leftToRight);        
        }        
        case '/cities': {          
          return PageTransition(child: CitiesPage(), type: PageTransitionType.leftToRight);        
        }        
        case '/impression': {          
          return PageTransition(child: ImpressionPage(), type: PageTransitionType.leftToRight);        
        }        
        case '/twitter': {          
          return PageTransition(child: TwitterPage(), type: PageTransitionType.leftToRight);        
        }        
        case '/quiz': {          
          return PageTransition(child: QuizPage(), type: PageTransitionType.leftToRight);        
        }        
        default: {           
          return PageTransition(child: HomePage(), type: PageTransitionType.leftToRight);                 
        }      
      }    
    },      
 );  
 @override  
 Widget build(BuildContext context) {    
   return materialApp;  
 }
}

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.