Flutter Navigator 2.0

Episode 08 - Create the Router Delegate

We need to add a router to our -main.dart- file. For that we have to create our Router which will define the -RouterDelegate- Methods. Navigate to router directory in our -lib- folder, and create a new file named - book_router_delegate.dart - and create a new class in the file which extends RouterDelegate and Mixin ChangeNotifier and PopNavigatorRouterDelegateMixin. as follows.

class BookRouterDelegate extends RouterDelegate with ChangeNotifier, PopNavigatorRouterDelegateMixin {}

Here We want to delegate the methods from RouterDelegate, ChangeNotifier and PopNavigatorRouterDelegateMixin so we extends to these classes giving making the methods available inside our Delegate class.

We wont go deep into how and why we extends and mixins other classes as these is out of our scope. Our main focus is Navigator 2.0. When we extend or implements other classes we have override few methods otherwise our class will throw erros. So let us remove these erros first. Override a GlobalKey having type of NavigatorState with variable name navigatorKey;

Also create three two more variables of AppStateManager and BookManager so that our router will listen to the app state change and movie changes to configure the navigator’s list of page. Create a constructor of our BookRouterDelegate and initialise the variables and the key that we have created.

Now Router Delegate requires us to add a build() method. This configures our navigator and pages. 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.

The pages parameter takes a list of MaterialPage that we want to add to navigation stack. If you will see we dont have any pages for now. So we will pass a blank array here. After we create the pages we will add them to this stack.

We have to override a final method and we are done for this class. Below add a Future setNewRoutePath which returns a null for now. We are not supporting web app for now so we wont be setting up this function. In future of this course we will set up our app for web.

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 we have initialised the global key and pass the variables and add listner that we have created, So add the following code.

appStateManager.addListner(notifyListeners); - This determines the state of the app. This manages the app’s state weather the app is initialised, logged it etc. bookManager.addListner(notifyListeners); - Manages the list of Books items and the item selection state. The add listeners takes a call back function as a parameter, pass the notifylistener inside to listen to the changes that takes place.

We have to stop the listen when our navigation stack is removed so that it does not create any memory leak. override dispose function and dispose all the listener that we have created as follows.

appStateManager.removeListener(notifyListeners); bookManager.removeListener(notifyListeners);