Flutter Navigation onGenerateRoute Part 2

Im ersten Teil zu Routing in Flutter haben wir uns routes: angesehen. Diesem Eintrag in unserer MaterialApp konnten wir eine Map übergeben, die unsere Links zu anderen Seiten der App enthielt. In diesem Post geht es nun um onGenerateRoute: , ebenfalls ein Eintrag der MaterialApp.

Aber noch einmal ein Blick zurück: In der MaterialApp haben wir bis jetzt mindestens den home: Eigenschaft des Widgets gesetzt. Im Routing System von Flutter entspricht das "/". Im Bildschirm Stack ist home: bzw "/" immer der "unterste" Bildschirm.

import 'package:flutter/material.dart';
import 'package:ongeneratetd_001/routing_konstanten.dart';
import 'router.dart' as router;

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      onGenerateRoute: router.generiereRoute,
      initialRoute: HomeScreenRoute,
      theme: ThemeData(
 
        primarySwatch: Colors.blue,
      ),
    );
  }
}

Im Code oben tragen wir bei onGenerateRoute: unsere Funktion ein. Man beachte das wir oben router.dart as router; importieren. Dieses File enthält folgenden Code:

import 'package:flutter/material.dart';
import 'package:ongeneratetd_001/home_screen.dart';
import 'package:ongeneratetd_001/login_screen.dart';
import 'package:ongeneratetd_001/routing_konstanten.dart';
import 'package:ongeneratetd_001/unbekannteRoute.dart';

Route<dynamic>generiereRoute(RouteSettings settings){

  switch(settings.name){
    case HomeScreenRoute:
    return MaterialPageRoute(builder: (context)=>HomeScreen());
    case LoginScreenRoute:
    return MaterialPageRoute(builder: (context)=>LoginScreen());
    default:
    return MaterialPageRoute(builder: (context)=>UnbekannteRoute(name: settings.name,));  
    }
}

Hier haben wir oben die Konstanten HomeScreenRoute und LoginScreenRoute eingesetzt. In dem switch Konstrukt werden dann mit Hilfe von MaterialPageRoute drei Routen generiert. Die dritte, die default Route, kann auf zwei Arten definiert werden. So wie oben zu sehen oder als MaterialApp Eintrag onUnknownRoute:.
Sollte es zu einer fehlerhaften Route kommen, was in Code der Routen generiert möglich ist, ist die default Route, die die Flutter anzeigt. Man kann es mit der "Page nicht gefunden" Seite im Web vergleichen. Der Name der nicht vorhandenen Route wird als Parameter weiter gegeben.
Zuerst aber unten die Konstanten:

const String HomeScreenRoute = '/';
const String LoginScreenRoute = 'LoginScreen';

Der HomeScreen:

import 'package:flutter/material.dart';
import 'package:ongeneratetd_001/routing_konstanten.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(child: Text('Home'),),
              RaisedButton(
                child: Text("Login Screen",
                style:TextStyle(
                  fontSize:34.0,
                )
                ), onPressed: () {
                  Navigator.pushNamed(context, LoginScreenRoute);
                },
              ),
              RaisedButton(
                child: Text("FehlerSchirm",
                style:TextStyle(
                  fontSize:34.0,
                )
                ), onPressed: () {
                  Navigator.pushNamed(context, "dsdffsf");
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Im Code oben haben wir auch eine fehlerhafte Route eingebaut. dsdffsf haben wir nicht als Route definiert. Der Code wird also, wenn wir auf den Button clicken auf die default Route zurückgreifen.
LoginScreen:

import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(child: Text('Login'),),
              RaisedButton(
                child: Text("Zurück",
                style:TextStyle(
                  fontSize:34.0,
                )
                ), onPressed: () {
                  Navigator.pop(context);
                },
              )
            ],
          ),
        ],
      ),
    );
  }
}

Der Code oben bietet altbekanntes. Zum Abschluss noch unbekannteRoute.dart:

import 'package:flutter/material.dart';
import 'package:ongeneratetd_001/routing_konstanten.dart';

class UnbekannteRoute extends StatelessWidget {
  final String name;
  const UnbekannteRoute({Key key, this.name}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(
                child: Text('$name ist eine falsche Route',
                style: TextStyle(
                  fontSize: 16.0,
                ),
                ),
              ),
              RaisedButton(
                child: Text("Home Screen",
                style:TextStyle(
                  fontSize:34.0,
                )
                ), onPressed: () {
                  Navigator.pushNamed(context, HomeScreenRoute);
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Auch hier ist der Code oben leicht zu verstehen. Der die falsche Route wird als name weiter gereicht und auf den Schirm gedruckt.

Fazit: Routing in Flutter ist an der Oberfläche einfach. Man sollte aber nicht vergessen, das wir hier auch nur ein sehr einfaches Beispiel erstellt haben. Was noch zu erwähnen ist:

/IrgendeinScreen

Wenn wir /IrgendeinScreen per .push auf den Stapel legen, führt Flutter zwei Aktionen aus:

"/"  wird auf den Bildschirm gebracht
IrgendeinScreen wird auf den Bildschirm gebracht.

/IrgendeinScreen ist ein "Deep Link", d.h. Flutter wird diesen String interpretieren und als zwei Routen identifizieren. Wir erinnern uns..."/" steht für home: bzw HomeScreen.

Kurz: das Thema Routing und routes in Flutter haben wir jetzt nur oberflächlich angeschaut. Was mir zum Beispiel noch nicht klar ist, ist der Unterschied zwischen initialRoute und home: . :-)
Bis bald !