Flutter Navigation 2.0
In the previous article, we looked at original Flutter Navigator 1.0 and how to implement it in our applications. In case you missed it, read up on it here.
In this article, we’ll focus on Navigator 2.0 which is a more advanced, declarative and flexible navigation system that was introduced to address the challenges and limitations of its predecessor, 1.0.
Difference between Navigator 1.0 and Navigator 2.0
Navigator 1.0 is an imperative approach to navigation in Flutter. It is simple and easy to use. However, as mentioned, it has its drawbacks:
- Developers are not able to fully manipulate the navigation stack as it is not exposed for modification. One can only add a page to the top of the navigation stack and remove the top most route (page). But navigation 2.0 is more flexible as developers have full control over the entire navigation stack and can manipulate it completely. One can add or remove any page that is on the stack.
- It is hard to manage screens without knowing where you have pushed or popped a page. There is no clear visibility of the navigation stack.
- It is difficult to work with deep links in Navigator 1.0.
Deep links are links that open an app and may take the user to a “deep” location inside that app. E.g., when an advertisement for product is clicked in one app, it opens the shopping app and displays the exact page for that product.
Deep linking is made simpler in Navigator 2.0. You can easily handle situations where your users can navigate to or from your app through links that point to the specific/intended pages.
PS. Navigator 2.0 is not a replacement for Navigator 1.0. Both can be used together in the same project. Navigator 1.0 can be used for simpler page to page navigation while Navigator 2.0 can be used for the complex navigation needs.
Navigation 2.0 key concepts
The following are key Navigator 2.0 concepts:
Page: This class is used to set the history stack of the Navigator declaratively by taking in a list of page objects.
Router: The router widget handles the configuration of the list of pages that the Navigator displays. It integrates with the underlying platform to manage routing e.g., urls in web apps.
RouterDelegate: This manages the router’s state. It defines how the router will listen to changes in the app state and navigation changes and in turn update the navigation stack.
RouteInformationParser: It translates deep links and URLs into corresponding navigation states/configurations.
RouteInformationProvider: It provides the current route information to the app’s navigation system.
Navigation 2.0 drawbacks
Navigator 2.0 has introduced really great features but it also has it also comes with its fair share of drawbacks:
- Complexity: I can attest to this. Navigator 2.0 has a bit of a learning curve. It is more complex than its predecessor and requires a deeper understanding of routing and navigation.
- Handling the back button presses: This is also complicated in this declarative navigation approach. As we mentioned above, in Navigator 2.0, you have full capabilities to manipulate the navigation stack. So you can pop or add pages at any point. Therefore, the application state must be managed well to ensure that on back button pressed, the correct screen is shown.
- State management: When dealing with complex routes that require multiple levels of state, state management with Navigator 2.0 also becomes more complex. Already state management is that dreaded elephant in the room. So having to consider this at the navigation point makes 2.0 a handful.
- More code: This declarative API requires a significant amount of additional lines of code than what was needed by the imperative API to accomplish the same task.
CodeMagic and Kodeco have amazing tutorials on Navigator 2.0 (I have linked the references below). This YouTube video also has an easy to understand tutorial on the same. When I finish my demo code (the complexity mentioned above is kicking me lol), I will update this article with the link. Thank you for your patience.
Moving doesn’t change who you are. It only changes the view outside your window.
— Rachel Hollis
Como siempre, thank you for reading! ❤
