If you like this article, considere buy me a cofee! 😉
Crypto donation button by NOWPayments

In all applications we need to navigate from one screen to another to be able to access their contents. This can be done in two different ways in Flutter: by creating an instance of the PageRoute widget and then passing it to the Navigator widget, or by using the Named Routes option. In this article we are going to see how to set Flutter navigation with Routes.

Using PageRoute to navigate between pages

Both the Cupertino package (iOS layout) and the Material Design (Android layout), present a display router: CupertinoPageRoute and MaterialPageRoute.

For example, let’s say we have an application with a screen called Home, and we want to navigate to another screen called Settings. To do so, for example with MaterialPageRoute, the code to use would be the following:

What we are doing is using the Flutter Navigator widget to which we pass the current context (BuildContext), along with the indication of where we want to navigate.

The Flutter Navigator‘s function is to manage a series of secondary widgtets according to a stack structure, in the same way that other types of platforms do.

In this case that we have just seen, the movement between the different pages is carried out by the Navigator according to a logic of push (Navigator.push) and pop (Navigator.pop), the latter being the one that would allow us to return to a page:

Using named routes

The navigation system is fine if we have a simple application. However, in more complex applications where it is necessary to navigate to a page from different points, we can find duplicate code.

To avoid this we can use named routes. For this, suppose the case in which we have an application with four different screens and their corresponding files:

  • Welcome: welcome_screen.dart
  • Settings: settings_screen.dart
  • Dashboard: dashboard_screen.dart
  • Library: library_screen.dart

We can introduce this information in the routes parameter of the MaterialApp class:

With the addition of these routes we can navigate from one page to another using the following code:

To avoid the use of text strings every time we have to make the call (thus reducing possible typographical errors), we can add the name of each route within each of the screens:

In this way we can change the code in the _AccessPageState class:

And make the call by:

Search order of routes

When searching for routes, the Navigator component follows the following order:

  1. The default path is the one indicated in the home parameter (in our case we have indicated WelcomeScreen).
  2. Otherwise, the routes table indicated in the routes parameter (in which we have indicated four routes) is used.
  3. Then the onGenerateRoute parameter would be called (it must return a non-null value for any route not contemplated in home or in routes).
  4. If all of the above fail, onUnknownRoute is called.

Using onGenerateRoute for navigation

We can also plan the navigation of our application by configuring the onGenerateRoute parameter. This parameter must be passed a function that takes a parameter of type RouteSettings and returns one of type Route.

To do this we create the MyRoutes class, which will help us with this purpose:

If we use onGenerateRoute, the NavDemoApp class is shown as follows:

And the navigation is done as follows:


We have seen how we can implement navigation between screens in a Flutter project directly (creating a PageRoute instance) or by using routes (both in the routes parameter and in the onGenerateRoute parameter):


Leave a Reply

Your email address will not be published. Required fields are marked *

Follow on Feedly