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

So now when we created material pages, we found that our home screen is throwing an error because detail screens need a book data and an index. Right now I'm going to remove the navigation function with navigates to detail screen and just pass and anonymous function and our error is gone. When our app loads the first screen we see is the splash screen. This is where the initialization of the app takes place. So go into the book Router Delegate, and inside our pages I'm going to pass the splash screen and we are going to create the page of the splash screen. Now you can see we have to initialize the splash screen before we can get the page of this splash screen. That is because we haven't created a static method, we have created a normal method. So let us convert all the pages that we have created in our class to a static method. And now if we go to our book Router Delegate all we have to do is use the class name and the static page. So now create all our material page as a static material page. Here we are calling the static method which returns the splash screen as the material page that we created at the top of the splash screen. So stop and restart the application. You will notice the error that we had previously is gone and our application is showing the splash screen. You can see our app is showing the initialized screen and then going to login screen. In our splash screen initialization state we have created a timer function which will navigate to the login screen. Let us remove that timer function now and I will restart the application. And now you can see that our application is on splash screen. Get back to the router delegate and add the login page below the splash screen. And now let us reload the application. After loading the application, you can see that our app is directly showing the login screen and we don't have a splash screen. This is because our page stack displays all the object added to the navigation stack and login page was added at the last. That's why it will be shown. As we mentioned before, navigator two is a declarative API. That means we can pass a condition in our navigation. Our splash screen is for initializing of the app. We pass a condition in the pages array to decide when to show the splash screen page. If the, is initialized value is false, that means our app has not been initialized and we should display the splash screen page. Instead of writing the splash screen page, I will first give a condition to show this splash screen. This condition should be false to show this splash screen page. So I will write a logical not operator at the start. At the same moment I want that the login page to be shown only after the is initialized value is true. So I will also write one more condition. Now let me restart the application and you can see that our app will only show the initialization screen and it won't go to the login screen at all. Congratulations, you have been successful to display a page from the navigation stack with the help of navigator two.