Flutter Web-Proper way to use both of onGenerateRoute and routes as properties of MaterialApp

问题

I have a browser link of reset password that sent by email(http://trialxx.id/#/auth?email=trial@email.com ), so whenever user click that link I would like to navigate them to ResetPasswordScreen. So far I have been declaring the route inside onGenerateRoute, here is the code

Route<dynamic> generateRoute(RouteSettings settings) {
    final settingsUri = Uri.parse(settings.name);
    final postID = settingsUri.queryParameters['email'];
    const start = "#/";
    const end = "?";
    final startIndex = settings.name.indexOf(start);
    final endIndex = settings.name.indexOf(end, startIndex + start.length);
    if (settings.name.substring(startIndex + start.length, endIndex) ==
            "auth" &&
        postID != null &&
        postID != "") {
      return MaterialPageRoute(
          builder: (context) => RisetPasswordScreen(email: settings.name),
          settings: RouteSettings(
              name: '/${settings.name.substring(startIndex + start.length)}'));
    }
    else {
      return MaterialPageRoute(builder: (context) => FirstScreen());
    }
  }

but, I didn't able to define it inside routes property, here is the way I define the route

MaterialApp(
debugShowCheckedModeBanner: false,
      onGenerateRoute: generateRoute,
      title: 'e-Recruitment',
      initialRoute: '/',
      routes: {
      if (Uri.base.queryParameters['email'] != null &&
            Uri.base.queryParameters['email'] != "")
          if (Uri.base.toString().substring(
                  Uri.base.toString().indexOf("#/") + 2,
                  Uri.base
                      .toString()
                      .indexOf("?", Uri.base.toString().indexOf("#/") + 2)) ==
              "auth")
            '/auth': (context) => RisetPasswordScreen()
          else
            '/home': (context) => FirstScreen(),
      '/': (context) => AnotherPage(),
      '/second': (context) => SecondPage(),
      })

so am I doing wrong or is there a proper way to define the routes of /auth?email=trial@email.com inside routes property?

回答1:

You should keep routes simple. You want to define one route name per screen without any wildcards (as you try in your example).

In your material define only routes without parameters:

Widget test(){
    return MaterialApp(
       debugShowCheckedModeBanner: false,
       onGenerateRoute: generateRoute,
       title: 'e-Recruitment',
       initialRoute: '/',
       routes: {
       '/auth': (context) => RisetPasswordScreen(),
       '/home': (context) => FirstScreen(),
       '/': (context) => AnotherPage(),
       '/second': (context) => SecondPage(),
    });
}

Then in your generateRoute() function parse uri just like you did, but without complicating things too much - parameter name in RouteSettings contains only path after /#. So if your link is http://trialxx.id/#/auth?email=trial@email.com, then settings.name will be /auth?email=trial@email.com

 Route<dynamic> generateRoute(RouteSettings settings) {
    var uri = Uri.parse(settings.name);
    switch (uri.path) {
      case home:
        return MaterialPageRoute(builder: (_) => MyHomePage());
        break;
      case auth:
        return MaterialPageRoute(
            builder: (_) =>
                ResetPasswordPage(email: uri.queryParameters["email"]));
        break;
      default:
        return MaterialPageRoute(builder: (_) => ErrorPage());
    }
  }

Pass email as variable to the page and handle its logic there

来源：https://stackoverflow.com/questions/65654560/flutter-web-proper-way-to-use-both-of-ongenerateroute-and-routes-as-properties-o

标签

Flutter

routes

navigation

flutter-web