First, you can read the official explanation here
Navigator 2.0 is a bit complicated to understand at the first time and more to implement it manually on your project without using an external package.
If you have read the article above, you will notice that adding routes in their example becomes very verbose
So we’ll make a version more generic.
Let’s start by managing routes from the browser’s search bar.
Here a link to the Github repo
Navigator will call its methods in this order when the path is send via the search bar
The main classes in Navigator are RouteInformationParser and RouterDelegate, keep in mind both take a generic type. I called it MyRouteData a class with 2 attributes path and params.
RouteInformationParser: it’s an abstract class which has 2 methods to override.
1 - parseRouteInformation its role is to parse the url from the search bar and return the generic type defined earlier (MyRouteData).
2 - restoreRouteInformation will update the new path in the search bar.
RouterDelegate: an abstract class too, its role is same as a controller, we’ll override some method from it.
1 - build method which return the navigator widget, we’ll use only 3 parameters key, pages, and onPopPages.
key take a GlobalKey<NavigatorState>.
pages is a List of page, Navigator display the last object of it.
onPopPage when Navigator.pop is triggered (back button).
2 - setNewRoutePath method, will return our list of pages for the build method.
3 - currentConfiguration return routeData, a local instance of MyRouteData used as source of truth about the current route.
So after a bunch of theory, let’s start with our parser parseRouteInformation in my_route_information_parser.dart.
parseRouteInformation return myRoutesParser(), I extract it from MyRouteInformationParser class because I use it later in RouterDelegate
its function is pretty simple it take the url, compare it to our existing routes and return MyRouteData with the correct path and its params if any, otherwise pageNoteFoundPath is returned.
The second method, restoreRouteInformation return buildRouteLocation and build the new path to display.
Here is the full code.
That was the easiest thing, now the second part of our router.
This time let’s see the complete code and I’ll explain each part.
After the parseRouteInformation setNewRoutePath is called with MyRouteData returned by parseRouteInformation.
routePagesMap is a map which have paths as keys and and a list of pages as values, the map is filled by _buildListPages() called once in the constructor, so at the beginning of our app.
_buildListPages() is used as well to define the previous path of each routes stored in routePrevMap.
Then once setNewRoutePath has done the build method of our RouterDelegate is triggered.
If _pages is empty I return a temporary page otherwise it will fail, you can notice in the first image when we see the different steps, build is called twice but at the first time MyRouteData and _pages are not yet filled.
Finally get current configuration return MyRouteData routeData to restoreRouteInformation then the correct path and widget is displayed.
Second use case, when you navigate with a button in the application, there are fewer steps.
We already know what all of them do except on tapped.
onTap trigger the call method of MyRouterDelegate.
This is a dart’s feature when a method is named ‘call’ you can avoid write it explicitly like above.
The call method does the same thing as setNewRoutePath with notifyListeners() in addition.
The back button is handled by onPopPages function of Navigator Widget.
_onpop() get the previous path corresponding of the current route in routePrevMap filled during _buildListPages step and rebuild a new one to update routeData and _pages.
And last but not least, you retrieve your data from the path by a simple call of currentConfiguration
So everything is done.
The only thing you have to do is to follow my instructions on my github and enjoy with navigator 2.0 :)
whether you have any suggestions or improvement in mind please let me know in comments.
BONUS
In the case that your app have to handle restrictions or some kind of guards, you can achieve this easily by modifying MyRouteData and add a bool like ‘isAccess’ with a method who check the validity of a cookie or any auth data stored locally (local storage of a smartphone for example).
