Flutter Navigator 2.0

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

Flutter introduced Navigator 2 as the new declarative API, which allows us to take full control of the navigation stack. It exposes the navigator's page stack, so that we have more control over pages. Navigator 2 is backward compatible. That means you can use it with Navigator 1 as well. We can use imperative and declarative navigation in the same app. Navigator 2 comes with a back button dispatcher, that triggers the system back button pressed event. Navigator 2 can be used with nested routes and give priority to our navigator. Deep links are possible in Navigator 2 which helps to navigate directly to the specific screen. With Navigator 2, we can now parse out and handle web URLs and deep links. You're on the screen. You can see we have displayed a chart letting us know about Navigator 2. The operating system sets the initial route of the application When the initial route is set, this route is provided to the route information parser by our route information provider. The route information parser sets the initial route and sends that initial route to our router delegate. The router delegate connects with the state of our application, which notifies request change to the navigator and the router widget rebuilds the widgets that we have to display when there is a change in the navigation. The route information provider provides the new intent to the route information parser, which creates a new route and sends that to our router delegate which again tells our app state manager to change the state and rebuild the router widget. When the system back button is pressed, our back button dispatcher event is triggered and it tells the router delegate to pop the route. Now based on the system modification, the app state manager notifies the widget router to pop the route and rebuild the pages that we need. This is how a basic Navigator tool works. Before we move ahead with our application, let us first understand few of the key components of Navigator 2 which we are going to use throughout our course. Pages. Pages that we are going to display. The configuration helps us to configure the pages that we're going to display. Router. Router handles the list of the pages that are displayed. Router Delegate. We delegate the router function that we can modify and use as per our need. Route information Parser. Information Parser, parses the information that we get from the router into our user defined data. Route information provider. Route information provider, provides the route information to the router. Back button dispatcher, handles the system back button pressed event or triggers when the system back button is pressed. Which lets us handle the back button pressed event. Here is another representation of how Navigator 2 works. We can see the navigation stack, which holds all the pages and our application, has our router and navigator which handles the navigation of the application. We have a separate app state which handles the changes that takes place done by the user activity in our application. This app state notifies our router and the router helps our navigator to change the pages in the navigation. This newly changed pages are then displayed on top of the screen. This is how Navigator 2 works.