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

Now that most of the navigation is done we are left with just Detail screen and Read Book screen. Let us write the navigation of the detail page. So when we click on the home page on the book title, it takes us to the detail page. This is where we will write the navigation code to our details page. Navigate to home screen and scroll down to the Title Gesture Detector on tap function. There is also a tool who called as ADD NAV two navigator function. Inside this on tap we will write the navigation function to our detail speech. We are using the booked tap function from our book manager class using provider. Here we pass the index that we click on the grid view. Now let us write the condition to show the detail page. Let us go back to our Book Router Delegate and write the code. We first make sure that the selected index in the book manager is not equal to minus one and on cart and on settings from app manager is not true. As you can see, our book manager dot selected book item is throwing an error. So let us go to our book manager class. As you can see, we don't have the selected book item. So let us create a getter function to get the selected book item. So below in Get Selected Index, we will write a getter function to get the selected book item. This will help us to get the selected book item in our Book Router Delegate class. And now that error is gone. After adding the details page condition stop the application and restart it and let's see if it is running or no. So our app is running, and now let me just click the login button to go to our home screen. Once in the home screen we can see all the tiles of our book. If clicking on any tile will take us to a detail page. And now you can see that we have encountered an error. And the error states: provider not found exception. The reason is that we have not passed the provider in our multi provider in Main dot Dart. Now, here is a small challenge for you. Just how we are creating a change notifier provider with an App. State Manager, create a change notifier provider with book manager below the App. State Manager. I hope you are able to create a change notifier provider with a book manager. If not, you should go back and check how we created an App. State manager. Now, restart the application and let's see if we are able to go to the details screen. Our app has been restarted. Now, the login button will take us to the home screen and clicking on any tile will take us to the details page. Our app is working as expected. Now let us write code to show the read book page screen. Navigate to the detail screen and scroll down to the read book button on press function. Here you can see we have a navigate to page function which navigates to read book screen and we pass a book data when we navigate to the screen. We will remove this function and add our new function with the help of provider. Now, as usual, let us go to our pages part in our book Router Delegate and add the logic About Read Book screen. The logic condition here is that we check if the read book is true and selected index is not equal to minus one. This means that we have selected a book and on cart and settings check is false so that we are not on the on cart and settings screen. Now restart or reload the application to check if you're able to go to the read book screen. We are able to go to the read book screen.