Flutter - Don’t use ‘/’ to prefix with navigation routes

A mobile apps usually have multiple screens or pages. The end-user is presented one screen at a time. The Flutter framework provides us page navigation and routes to manage multiple screens.

We have published a post to manage multiple screens in Flutter application.  Flutter- Screen push and pop with Navigator. You can learn complete guidelines to manage routes, push and pop methods of  Flutter Framework.

The Flutter frameworks can help you to understand page navigation and manage conditional logic to determine which page to show first for things such as login and onboarding. If you’re using the MaterialApp widget, then you typically set the initialRoute property to specify where you want the app to start as shown below:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/login',
      onGenerateRoute: generateRoute,
      title: 'Test App',
    );
  }
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => HomeView());
      case '/login':
        return MaterialPageRoute(builder: (_) => LoginView());
      default:
        return MaterialPageRoute(
          builder: (_) => Scaffold(
            body: Center(
              child: Text('No route defined for ${settings.name}'),
            ),
          ),
        );
    }
  }
}

As you can see above,  to manage multiple screens. We using "/" to make the first screen of the route, then another route is pushed for ‘/login’ resulting in your home page is created and then your login page.

What’s happening here?.  if you read the documentation for the initialRoute property:

If the route contains slashes, then it is treated as a “deep link”, and before this route is pushed,
the routes leading to this one are pushed also. For example, if the route was /a/b/c, then the app 
would start with the three routes /a, /a/b, and /a/b/c loaded, in that order.

What the example fails to explain properly is that the first route pushed is actually ‘/’ as I described above.

we can resolve it with a simple solution and that’s to remove the ‘/’ prefix from your routes:

initialRoute: 'login',

If you need to keep slashes in your routes for deep linking or something else, then you can always check the value of settings.isInitialRoute in your onGenerateRoute handler. This will be true for the very first route being pushed onto the Navigator.


I hope it makes sense to manage multiple screens in the Flutter application. If anything wrong happening in your Flutter Project regarding route, feel free to ask it from the comment section.