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

The Navigator widget that we return into our book_router_delegate build method takes a stack of material pages. We do not have any material page present at the moment. Let us create some material pages from our material widget screen. Navigate to our splash_screen.dart file. And you can see TODO: Add a material page, on top. Let us add a material page over here. We are going to create a material page, which will return a MaterialPage. And we are going to pass SplashScreen as a child. Make sure to create the SplashScreen as a constant. As you can see, our material page also has a key and name property. Let us pass those values as well. You remember we have created a BookPages class, where we defined the page path configuration. Pass that value as key, as well as names. And in now we have a material page, which returns a SplashScreen. We have to repeat this step on all the screens, and create pages of respective screens. Here is the next challenge for you. Just like how we have created a SplashScreen material page in our splash screen, create a material page in all the screens, except the detail screen and the read book screen. We also have a TODO, where I've mentioned, where we have to create a material page. I hope you are able to pass this challenge. So this is how we have created all the screens. In settings_screen, if the SettingsScreen is throwing an error, just remove the const keyword from here. Signup. SignupPath. SignupScreen. And we've already done the SplashScreen. In our detail_screen, we pass two parameters while creating the material page that we will be using later in our application. A Book variable, having a data type of book, and an integer index, having the value of minus one. So when we call the book page, we should be able to pass the index and book item to our detail_screen. So this is how we create our detail_screen. And we are going to pass the DetailsScreen as a child. Just like we did in the previous screen, we will also pass the name and the key value. As you can see, our DetailsScreen require a parameter, that is bookData, but we will pass index as well. To pass the index in our DetailsScreen constructor, let us create a variable below. We will add the newly created variable in the constructor of our DetailsScreen. And now, we will pass the book data and the index in our MaterialPage, child: DetailsScreen. Let us go to our read_book_screen, and also create a MaterialPage over there. Navigate to the TODO, which says Add material page. Our read_book_screen only takes the bookData. Let us pass the bookData as a parameter. When we create a MaterialPage, we are going to return a MaterialPage. We are going to pass the ReadBook as the child to our MaterialPage. Let us first add the key and name to our MaterialPage. Our read_book_screen requires the bookData to be passed when we construct the Screen. Let us pass this book into our bookData. All the material pages are ready. And you can see that home_screen is throwing an error at the DetailsScreen, because we added a constructor where we pass the index. It is fine. We will fix this error later.