Flutter Navigator 2.0

Episode 09 - Use the App Router Delegate

We have to use the router delegate that we have just created. Navigate to main.dart and create a new private final variable named bookRouterDelegate and create it as a late variable like follows.

 late final BookRouterDelegate _bookRouterDelegate 

After creating the variable we have to initialise the variable in the initState of main.dart and pass the appStateManager and bookManager as the parameter.

 _bookRouterDelegate = BookRouterDelegate(
        appStateManager: _appStateManager, bookManager: _bookManager);

This is how we initialised our app router before we use it. Scroll down to our build() method where we are returning the MultiProvider widget. In the MaterialApp home parameter where we are currently passing SplashScreen(), pass RouterDelegate as follow so that we can set the RouterDelegate to show the pages.

home: Router(routerDelegate: _bookRouterDelegate)

We do not need to import any screens so scroll to the top and remove the SplashScreens import from the top. Run The application from start and our application must throw an error exception and simulator might even display a red screen of death error.

Navigator.onGenerateRoute was null, but the rote names '/' was referenced.

Do not worry this error was expected because Navigator Pages cannot be empty. The app threw an expectation because it cannot generate a route. Let is fix this issue by adding pages to the navigator pages in Our next segment.