Flutter Navigator 2.0 for mobile dev: 101

This article is part of a series aiming at making you a master of Navigator 2.0 while showing you that it is not as hard as people think. The other articles of this series are:

• Flutter Navigator 2.0 for mobile dev: Nested navigators basics: How to nest the navigators, and the fix needed to avoid that they ruin your animations
• Flutter Navigator 2.0 for mobile dev: Transitions: How to implement Hero or Page route transitions with navigator 2.0
• Flutter Navigator 2.0 for mobile dev: Bloc state management integration: How to use navigator 2.0 and the bloc library
• Flutter Navigator 2.0 for web dev: Url handling: The basics of URL handling.
• Flutter web: URL handling made simple with simple_url_handler: How to use the simple_url_handler package to easily manage the url in flutter web.
• Flutter web: A complete example using simple_url_handler: A complete example, using everything seen above, to build the routing and url handling of a more complete app.

Flutter recently release Navigator 2.0, its new navigation system. While this is suppose to give developers more flexibility and ease (with a declarative approach), the new system faced many criticism. In my opinion, this is only due to one thing: presentation. Indeed, the main resource when I am writing this is this medium article: https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade. But it should be called “an advanced courses on how to implement navigator 2.0 on the web” not “Learning Flutter’s new navigation and routing system”. I would argue that navigator 2.0 is not only more powerful but also as simple as navigator 1.0, and this is what I will demonstrate in this article.

Note that this article is meant to introduce the very basics and won’t support web functionality such as URL handling.

Final result:

App architecture:

• MyApp: contains the MaterialApp and the Router
• MyRouterDelegate: our main focus here. This is the widget handling the navigation
• MyHomeWidget: the first page with the button
• MyOtherWidget: the page which appears on top of MyHomePage

Classic Flutter:

Let’s get the usual part out of the way. Here are MyHomeWidget , MyOtherWidget and MyApp :

This should all look familiar if you already coded a flutter app.

The only new part is in MyApp where you put the Router widget. Instead of passing the usual child, you pass a routerDelegate. Nothing scary here just a different name 🙂

Now off to the interesting part : the RouterDelegate

Here is the code, see the explanation below:

Regarding the mixins:

• ChangeNotifier is the class which enable us to call notifyListeners() whenever the route changes. This is the equivalent of calling setState in a way.
• PopNavigatorRouterDelegateMixin is just a class which implements the method popRoute for you to handle backbutton press. Look at the source code you will see it's just that.

3 elements remain to be implemented:

• setNewRoutePath which we don't use since we are not on the web
• navigatorKey which is a key to refer to our navigator. It is used by the PopNavigatorRouterDelegateMixin and you can use it to navigate in an imperative way (though you should never need)
• build which should look familiar. The only special thing about this one is that you should return a Navigator and not any widget in this implementation.

The widget you are here for: Navigator

• You should pass the navigatorKey to its key parameter
• pages is the stack of pages describing our navigation stack in a declarative way. Note that we don't use directly the widget but rather MaterialPage. At this point you should not worry about it but know that MaterialPage describes for example the transition between different route. Also note that the key parameter should be used in order to properly animate between the pages.
• onPopPage is where you must change your internal state to reflect the pop (if route.didPop(result)returned true). In our case we set showOtherPage to false

And that all! As you see nothing really complicated, we could sum everything up like so:

TL;DR:

Here is how to use Navigator 2.0 for mobile dev.

Return a Router with the routerDelegate argument.

Create a RouterDelegate class which is basically a widget which:

• Should return a Navigator in its build method
• Creates a navigator key to pass to the navigator
• calls should notifyListener instead of setState to rebuild

The navigator:

• defines pages which are your app widgets wrapped in MaterialPage stacked in a declarative way
• defines onPopPage (which must return route.didPop(result)) to handle any pop event.

Here is the entire code for those who just want to copy/paste 😉