Flutter router in 4 easy steps

Sometimes you’ll need to put some order into your project, and it can be a hard task. Indeed, jumping from widget to widget can be stressful and hard to check, even more, if your app is very big.

Luckily for you, you can leverage a tool, called Navigator component, that is used to simulate a screen change on your app, and it’s pretty easy to use. Anyway, bear in mind that with a Router, all you need to do is remember where to go.

If you’re an Android developer, it’ll be something you’re already familiar with. Indeed, it’s pretty simple to understand how manifest manages activities. You just need to think your app as a “website”.

Let me tell you what I mean:

• Your first screen is your main route, you can say it’s your “main”, so you should label it with “/”.
• Any other screen should be considered like a child of the main route, so, for example, “/screen_1” as entering a sub-page from a website.
• Consequently sub-sub-pages should be child of other pages (e.g. “/screen_1/screen_2”)

Now I’ll try to explain in the best (and easiest) way possible how to create a router for your Flutter app.

1. Choose how to organize your app

This is not a code passage but a mental state. You should think your app as a set of “screens” with parents and children. For example, a newsfeed app could include the following elements:

• A Home with a list of news: “\”.
• Single news: “\news”.
• Settings: “\settings”.
• Settings — Notifications: “\settings\notifications”.

2. Create your router file

Create a router.dart file in which you'll set your route names (a main and news screen for example) and a single function:

static const String mainRoute= '/';
static const String newsRoute= '/news_route';
static Route<dynamic> generateRoute(RouteSettings settings) {
}

This generateRoute function is the main protagonist. It's needed to redirect the user to a screen.

Inside the generateRoute function, use a switch that'll create the Scaffold you need for each route.

switch (settings.name) {
      case mainRoute:
        return MaterialPageRoute(
          settings: settings,
          builder: (_) => MainScaffold(),
        );
      case newsRoute:
        return MaterialPageRoute(
          settings: settings,
          builder: (_) => NewsScaffold(),
        );
      default:
        return null;
    }

Ok, now you’ve got your router. Next time you want to change screen, you’ll simply need to use the Navigator.pushNamed function and the name of the route (and, optionally, some arguments to pass).

3. Add the router to your MaterialApp

You’ll need to add the reference to your MaterialApp on your router by adding these 2 arguments:

onGenerateRoute: AppRouter.generateRoute,
initialRoute: '/',

Your Flutter app will now start on the MainScaffold screen. Then with pushNamed(‘/news_route’), you’ll go to the NewsScaffold.

4. Remember to call route names with const

This is just a tip. But, please, don’t hardcode route names into your app. Use a class with all names, and call them with easy names.

That’s it! It wasn’t so hard, wasn’t it?