Flutter Navigator 2.0

Episode 10 -Create Material Pages

The Navigator Widget that we return into BookRouterDelegate’s build method takes a Stack of Material Pages. We do not have any Material Page present at the moment. Let us create some MaterialPages from our Material Widget Screen that we have created. Open the Splash Screen that we have created. On the top above the constructor let us create a Static MaterialPage.

  static MaterialPage page() {
    return MaterialPage(
      name: BookPages.splashPath,
      key: ValueKey(BookPages.splashPath),
      child: const SplashScreen(),
    );
  }

Here we have called a static function that returns a MaterialPage and we have passed our SplashScreen as a child parameter to this widget. Every MaterialPage has name and key property. You remember we have creates a BookPages class where we defined the page path configuration. Pass that value as key as well as name.

We have to repeate this step on the all the screens and create pages of the respective screens. Only Detail Screens and ReadBook Screen will have slight change. That we will see now. So lets get the pages ready.

In our detail screen we pass two paramets while creating the Material Page that we will be using later in our application. a book variable having a data type of Book and int index having a value -1. So when we call the book page we should be able to pass the index and book item to our detail screen.

Just like we created the detail page. We will create ReadBook Page but we will just pass single parameter of book having a datatype of Book modles that we have created. Which will return ReadBook Screen as the child Property.