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

[Presenter] Now that our app state manager and book manager is done we need to add a router to our main dot file. For that, we have to create a router which will define the router delegate methods. Navigate to our router directory in our live folder and create a new file called as "Book Router Delegate.dart" Inside this file, create a class with the same name which extends router delegate change notifier and pop navigate router delegate mixing. Here we want to delegate the methods from router delegate change notifier and pop navigate router delegate mixing. So we extend to these classes, making the methods available inside our delegate class. We wouldn't go deep into how or why, we extend and mix things at other classes, as this is out of our scope. Our main focus is Navigator Two. When we extend or implement other classes we have to override a few methods, otherwise our class will throw errors. So as you can see our router delegate are throwing some errors. Let us first remove those errors. First , we will override a global key, having a type of navigator state with variable name, "Navigator key." Also create two more variables of app state manager and book manager so that our router will listen to the app state change and book change to configure the navigator's list of page. If you see our variables are still throwing some error and if you will hover your cursor over there, you can see that the final variable abstract manager must be initialized. So let us create a constructor of our book router delegate and initialize the variable and the keys that we have created. Our router delegate requires us to add a build method. This configures our navigator and pages. Let us override a build method. Our build method will return a navigator widget and we will pass the navigator key that we created on top as the key parameter in the widget. Our navigator widget also has a pages property. As you can see, it takes a list of dynamic pages. You will see we do not have any pages for now, so we will pass a blank out of here. After we create the pages, we will add them to this stack. As you can see, our book Router delegate is still throwing an error. That is because it is missing a concrete function. Click on book router delegate, and press command dot and a popup menu will appear. Click on Create one Missing Override and a function will be created at a bottom named as, "Set New Route Path." We are not supporting web for now so we are going to return "Null" for this function. In future of this course, we will set up our app for web and that time we will re-read this function. As you can see, our set new route part is still throwing an error at the configuration parameter. It is because it's type is unknown. As well, you can see that the router delegate is also throwing an error. That is because the router delegates type is dynamic. Let us add the type for router delegate and fix this error as well. We will pass the app state manager right now and you can see all the errors are gone. We have created a router delegate and in our next video we will use this router delegate to navigate. Now that our book router delegate is ready we have to connect the state manager. So when the state changes the router will reconfigure the navigator with a new set of pages. So navigate to the place where we have initialized the global key and pass the variables and "Add listener" that we have created. Over here, we are going to use a forwarding constructor. This reminds the state of the app. This manages the app's state whether the app is initialized logged in. As we have added a listener to the app state manager we are going to add listener to the book manager. This will manage the list of the books and the item selection state. We have to stop the listener values when our navigation stack is removed so that it does not create any memory leak. So override the dispose function and it dispose all the listeners that we have created as follows.