Flutter Navigator 2.0

Transcript: 01. Learn Navigator 1.0 & its Disadvantages Navigation in application. Mobile applications are made up of multiple screens, which display different kinds of information as per the requirements. The user has to constantly switch between screens as they interact with the application. This is where navigation comes into play. Navigation is one of the most important aspect 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 their application. Flutter has its own way to tackle this navigation and makes it easier for developers. Let us check out how Flutter tackles the navigation. Let us start with Navigator 1.0. Navigator 1.0 is Flutter's 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 navigation stack. In Navigator 1.0 the widgets are pushed in and popped out of the navigator's stack. Pushed 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. Here you can see a graphic representation of how pop and push works. Applications have a navigation stack which follows LIFO, last in first out, where all the screens are stacked on top of each another. As you can see on the screen, we have a navigation stack. When we have to display a new screen, we create that new screen and push that to the top of the navigation stack. This makes the new pushed screen visible. When we have to go back to the previous screen all we have to do is remove the top screen from the stack and it makes the previous screen visible again. This is how a basic navigation works. Navigator 1.0 classification. How is our Navigator 1.0 classified? Navigator 1.0 has two types of navigation. Anonymous routes and named routes. Anonymous routes where we directly push and pop the widget class to the stack. And named routes we route using string variables defined in the class. Here is an example of an anonymous route. We are using the anonymous route of Navigator 1.0. Here you can see we are pushing the widget directly to the navigation stack. This type of navigation is called as anonymous navigation. Let us see how named routes work. As you can see on the screen, in named route we assign a string variable to our widgets and use that variable to push the widget to the top of the navigation stack. Now that we have seen navigator 1.0, let us see what are the disadvantages of Navigator 1.0, so that we will understand why we are choosing Navigator 2.0. 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 to the widget hierarchy. There is no good way to manage pages without keeping a mental map of the screen that we pop and push, which makes it difficult to understand pre-written navigation code, as there is no navigation flow present. Navigation 1.0 fails to expose the navigation route stack making it difficult to handle complicated cases. We do not have any provision to add or remove screen in 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 the pages change. We only see the base URL. Cannot jump directly to a selected page from URL redirecting. These are the main disadvantages of Navigator 1.0 And if your application is complicated, you should go with Navigator 2.0.