Flutter Navigator 2.0

Episode - 11 Display the Splash Page

When our app loads the first screen we see is the SplashScreen. This where the initialisation of the app takes place. Go to BookRouterDelegate and inside the pages array add the Splash Screen Page as shown.

SplashScreen.page(),

Here we are calling static method which return the splash screen as a material page, that we created at the top of SplashScreen. Stop and restart the application. you will notice the error that we had previous is gone and our application is showing the SplashScreen.

Congratulations We have been successful to display a page from the navigation stack with help of navigator 2.0. Now below the SplashScreen.page add the LoginScreen.page and reload the application.

What can we see. We see that app shows loginPage and not the SplashScreen. This is because our page stack displays the all object added to the navigation stack and loginpage was added at the last and thats why it will be shown. As we have mentioned before Navigatior 2.0 is a declarative API. That mean we can pass a condition in our navigation.

Our SplashScreen is for initialising of the app. we pass a condition in the pages array to decide when to show the SplashScreen.page. If the isInitialized value is false that means our app has been initialized and we should display the SplashScreem.page

if(!appStateManager.isInitialized) SplashScreen.page(),

Now run the app again you will notice that our app stays at SplashScreen. The login page is not shown at all.