CODEWITHSUNDEEP
flutterroutesnavigationflutter-web
wahyu
wahyu

Reputation: 2405

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/#/[email protected] ), 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 /[email protected] inside routes property?

Upvotes: 0

Views: 3086

Answers (1)

Michal
Michal

Reputation: 36

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/#/[email protected], then settings.name will be /[email protected]

 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

Upvotes: 2

Related Questions