Flutter Navigator 2.0

Episode - 15 Navigate to Detail And Readbook Pages

Let is write the navigation of the details page. When we click on the book tile on the home page it takes us to the detail page. Come to homeScreen and in the onTap function in the Grideview Write the bookTapped Function from the BookManager class.

Provider.of<BookManager>(context, listen: false).bookTapped(index);

Here we pass the index that we click on the GrideView. Now let us write the condition to show the detailPage. Go to BookRouterDelegate and write the code. We first make sure that the selectedIndex n the book manager is not equal -1. and onCart and onSettings from appStateManager is not true.

if (bookManager.selectedIndex != -1 && !appStateManager.onCart && !appStateManager.onSettings)DetailsScreen.page(book: bookManager.selectedBookItem, index: bookManager.selectedIndex),

Reload the app and check the after clicking on any tile in the gride view it will take us to DetailPage.

Let us write the code to show the ReadBookPage Screen on the DetailScreen where the onPressed function of the readBook button add the onReadBookTapped function.

Provider.of<AppStateManager>(context, listen: false).onReadBookTapped(true);

As usual let us go to pages part where we write all the logic and condition of our navigation page.

  if (appStateManager.onReadBook &&
           bookManager.selectedIndex != -1 &&
           !appStateManager.onCart &&
           !appStateManager.onSettings)
         ReadBookScreen.page(bookManager.selectedBookItem),

The logic Condition here is that we check if the onReadBook is true is selctedIndex is not equal to -1, This means that we have a selected book. And onCart and Setting check is false. Now restart the app check if our app working as expected like detail screen and readbook page.