Routing In Flutter

In this tutorial, we’ll cover the Routing in Flutter.

Imperative navigation (Flutter 1.0)

Flutter 1.0 took an imperative approach to navigation.

Flutter Navigator class

The Navigator class provides all the navigation capabilities in a Flutter app.

Navigator provides methods to mutate the stack by a push to stack or by popping from the stack. The Navigator.push method is for navigating to a newer page and Navigator.pop is for going back from the current page.

Here is a basic example of pop and push: the push method takes BuildContext as the first argument and the second argument is a PageBuilder. This example uses MaterialPageRoute, which provides the transition animation and handles route changes:

The pop method only takes BuildContext and changes the current route.

Navigator provides more methods, including *pushReplacement*, which make arguments similar to push. It will replace the current route, so navigating back to the older route is not possible.

For example, upon successful login, you would want to use *pushReplacement* to prevent the user from returning to the login screen.

Named routes

Allow you to change the path by using strings instead of providing component classes, which in turn enables you to reuse code.

Are defined as a map on MaterialApp. These routes are usable from any part of the application.

Defining routes

The route is a map with string keys and values such as builders that are passed to the routes property on MaterialApp:

Using named routes

Instead of push, pushNamed is used to change to a new route. Similarly, *pushReplacementNamed* is used instead of pushReplacement. The pop method is the same for all the routes.

Flutter Navigator

Navigator takes a list of pages and displays the last page. You can change its pages by adding or removing pages from the end of the list.

The example below demonstrates how to use the Navigator class with the new Flutter Navigator using page-based navigation.

The _page is state managed by this class. For navigation, this _page is manipulated in the setState call:

The _page is passed to the Navigator class. Navigator will change the current page based on the value of _page.

The initial page can be set by adding a page in the initState lifecycle method:

To create a new material page, use the MaterialPage widget. MaterialPage takes a child and a key. The Navigator uses key to differentiate between pages and detect page change.

On the click button press, a new page is added to _page state. setState is called to trigger a rebuild of the widget and Navigator automatically handles the page change.

This page is built in the same way as _buildMain, but instead of adding a new page, it removes one and triggers rebuild.

In addition to using the _pages list as a state, you can use any other state to perform navigation. Here’s another example:

Using RouterDelegate

RouterDelegate is a core widget used by Router. It responds to the engine’s intent for route push and route pop. New navigation allows the creation of RouterDelegate for better control over navigation.

A RouterDelegate is created by extending the RouterDelegate<AppRouteState> class with PopNavigatorRouterDelegateMixin,ChangeNotifier mixins.

_selected tracks the current route. This is similar to the state used in the earlier example.

notifyListeners is used instead of setState to trigger a rebuild. _selected is changed to change the route.

This is similar to _buildMain:

The build function returns the Navigator widget, which is used to lay out other pages. This function is similar to build from the previous function. Instead of setState, notifyListeners is used to trigger rebuild.

This function uses information passed by the router to change the route.

RouteInformationParser

setNewRoutePath receives the configuration from the router. This configuration is parsed by RouteInformationParser.

For the parsing state passed by the OS, engine, etc., a class should extend RouteInformationParser. restoreRouteInformation takes the return value from currentConfiguration and converts it to RouteInformation.

parseRouteInformation returns the router state, which is passed to setNewRoutePath.

Putting it all together

MaterialApp now has a newly named constructor, which implements a router that takes Delegate and InformationParser as arguments.

Thanks for reading.

Happy Coding 🙂

For more flutter tutorials, visit mobikul blog