Flutter Navigator 2.0

Episode 2 - Learn Navigator 2.0

Learn Navigator 2.0

Flutter introduced Navigaor 2.0, as a new Declarative API which allows us to take full control of the Navigation Stack. Expose the Navigators Page Stack So that we have more control over pages. Nav 2.0 Is backword compatible meaning you can use with Nav 1. We can Use Imperative and declarative in the same app. Back Button Dispatcher triggers the system(browser and app back button) back button pressed. Can be used with Nested Routes and give prioority to navigator. Deeplinks are possible in Nav 2.0 which helps to navigate directly to the specific screen. Parse routes and handles web UR’s and deep links.

We have displayed a chart letting us know about Navigator 2.0. Here the Operating System sets the Initial Route of the application which provides the RouteInformation through Route Information Provider and passes the information to Router Delegate. The Router Delegate connects with the State of the App which notifies request changes to Navigator. The Router Widget get configured and rebuilds from router delegate.

Before we move ahead with application let is first understand few of the Key Components of Navigator 2, which we are going to use through out our course.

Pages: Pages that we are going to display. The configuration which help us configure the pages that we are going to display. Router: Router handles the list of pages that are displayed. Router Delegate: We Delegates the Router function that we can modify and use as per our needs. Route Information Parser: Information Parses, Parses the information that we get from router into our user - defined data. Route Information Provider: Provides the RouteInformation to the router. Back Button Dispatcher: Triggers the system back button pressed event which lets us handles the back button pressed.

We can see the navigation stack which holds all pages. And our application has our Router and Navigator which handles the navigation of the application. Have A separate App State which handles the changes that takes place done by user activity. This App State notifies our router and the router helps our navigator to change the pages in the navigation.