The Detail Page shows a specific Book that we have selected. Add the selectedBook variable and then navigate to Detail Screen where we show all the details of the app.
This content was released on Nov 8 2022. The official support period is 6-months
from this date.
The Detail Page shows a specific Book that we have selected. Add the selectedBook variable and then navigate to Detail Screen where we show all the details of the app.
Cinema mode
Mark complete
Download course materials
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress,
bookmark, personalise your learner profile and more!
Previous episode: 14. Navigate to the Cart & Settings Pages
Next episode: 16. Go to the Previous Page
Get immediate access to this and 4,000+ other videos and books.
Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and
4,000+ professional videos in a single subscription, it's simply the best investment you can make in
your development career.
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.
All videos. All books.
One low price.
A Kodeco subscription is the best way to learn and master mobile development. Learn iOS, Swift, Android, Kotlin, Flutter and Dart development and unlock our massive catalog of 50+ books and 4,000+ videos.