Routes and Navigation in Flutter

Routing is one of the most used things in your app to build anything meaningful. However, navigating between pages can be horrible when messed up. And this does not sound good.

There are various options for routing. Here you learn the first choice for all and yet clean code.

Video Tutorial

Let’s get to the topic

Here we have two pages, First Page and Second Page. Our app is going to work as follows:

First Page consists of a button Go to second. When clicking the button, the app goes to the Second Page. Also we are going to pass the data from First Page to Second Page.

Before performing, the routing the right way, we need to have some pages to navigate between. And setting them up, it is not bad to perform the basic way of navigation from which we want to move away.

First, we create the new file inside the lib folder. Inside it, create the new file first_page.dart.

It is going to look as follows:

When clicking the button, on onPressed method, we push MaterialPageRoutes directly to the navigator.

 Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => const SecondPage(
                        data: 'Hello there from the first page!'),
                  ),
 )

This MaterialPageRoutes creates lot of boilerplate code. As the app gets bigger and the we have more pages it gets more worse and we might get lost in all the routes defining all over the place.

And this becomes true if you have to allow only signed-in users to enter certain specific pages, or some king of other logic which need to perform when the user navigates.

This is the basic method to navigate.

The better way to navigate

Now we shall try with the new method to perform the same task but in a bit better way i.e using the namedRoutes.

...
// Pushing a named route
Navigator.of(context).pushNamed(
  '/second',
  arguments: 'Data from first page!',
);
...

We have two options to navigate with named routes without using a package.

• The first is the simplest — just specifying a map of routes on MaterialApp widget, having the key with the names of the routes. But as soon as we have to pass some data between pages, and run come logic, this option would be of no use as we cannot pass the dynamic additional data in the map’s literal.
• The second option is just to specify the function that returns the route. By doing this, we still get the benefits of using named routes, but also with the option to pass data to other pages. And also we can add the logic to this function.

Creating the Router

Now we create the new file route_generator.dart inside the lib folder.

It’s good to separate your code into multiple classes and stand-alone functions though, so let’s create a RouteGenerator class to encapsulate the routing logic.

Then, function which you need to specify on the root widget MaterialApp is called onGenerateRoute.

 MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      onGenerateRoute: RouteGenerator.generateRoute,
    )

SecondPage.dart

With this run your code and test it. Check by passing the wrong data type with the argument and the named route that does not exist. Also, play around with the code by creating a new page and navigating to that page.

And our final folder structure would be as follows:

Folder structure

Conclusion

You have learned how to navigate around your Flutter applications in a better way suitable for larger apps. We’ve created a RouteGeneration to manage all the routing logic — saving from code duplication. Creating many smaller classes with a specific purpose is always a better way to simplify the code and when it is for routing, this principle still holds true.

Let’s get connected

We can be friends. Find on Facebook, Linkedin, Github, Youtube, and Instagram.

Visit: Flutter Junction

Contribute: BuyMeACoffee

Get full code:

GitHub - nbnD/routing_example

Routes in flutter