Flutter Navigator 2.0

Learn Navigator 1.0 & its Disadvantages

Mobile Applications are made up of multiple screens which displays different kinds of information and designs as per the requirements. The user has to constantly switch between screens as they interacts with the application. This is where navigation comes into play. Navigation is one of the most important aspects of an application. Which makes it easier to move forwards or backwards in an application. Developers have to create a seamless navigation experience for users who use thier applications. Flutter has its own way to tackle this navigation and make it easier for developers.

Navigator 1.0 is Flutters very own way to ease the navigation in our application. Mobile apps display screens on top of each other like a stack. The stack is called as Navigatio Stack. In navigator 1.0 the widgets are pushed and popped onto the navigator’s stack. Push to add a widget to the stack and pop to remove the widget from the stack. Push places a widget on top of the stack. The other widgets are already present below the pushed widget. The Pop just takes out the top widget from the stack and the widget below becomes active again

Applications have a navigation stack which follows LIFO (Last-In-Fast-Out) where all the screens are stacked on top of another. The Navigation Stack displays the top screen on the stack. When we have to display a new screen we “Push” that screen onto the top of the stack and make it visible. When we have to go back to the previous screen all we have to do is remove the top the screen from the stack and make the previous screen at the top screen and make it visible.

Navigator 1.0 Has two types of navigation. Anonymous Routes and Named Routes. Anonymous Route: Where we directly push and pop the widget to stack. Named Route: Using string Variables defined on the class.

We are using the anonymous routes of navigator 1.0. You can see we are pushing the widget direcly to the navigation stack. This type of navigation is called as Anonymous navigation.

In Named routes we assign a string variable to our widgets and use that variable to push the widget to the top of the Navigatin Stack.

Navigator 1.0 is a very basic imperative API which forces us to just pop and push our widgets to the Navigation stack. To present another screen we have to set a call back up the widget Hierarchy.

There is no good way to manage pages without keeping a mental map of the screens that we pop and push, which makes it difficult to understand the pre-written Navigation code. Also there is no Navigation flow explanier present.

Nav 1.0 Fails to expose the Navigation Route Stack making it difficult to handle complicated cases. We do have any provision to add or remove screen between the pages.

Cannot trigger the system back button pressed event so it is difficult to handle the system back button pressed. Cannot update the Web Url when pages get change. Only base URL is seen. Cannot jump directly to a selected page from Url redirecting.