Flutter Navigator 2.0

Episode 12 - Display the Login page and Signup Page

Now that we have displayed splash screen successfully. We want to display the login screen after 2 seconds of delay. Let us create the condition in our pages array to display the login page.

Navigate to BookRouterDelegate and go to pages array. Here we want to create a conditional to show our loagin. We want to show login page when our app initialisation takes place but login booleans is false.

 if(appStateManager.isInitialized && !appStateManager.isLogin) LoginScreen.page(),

Now we have to change the isInitialized value to true when our init is done so that our appStateManager will communicate with our router and display the login page .

Navigate to SplashScreen and override a StatefullWidget function didChangeDependencies. Did Change Dependencies will be called when the dependencies are changes or is reloaded. So call the previous function below.

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

Reload the app and you can see our app will start with SplashScreen and after 2 seconds delay LoginScreen will be displayed.

Now let us Navigate to SignUp page from login page. Navigate to build function in BookRouterDelegate. And In pages let us add new Condition to show our signup page.

if (appStateManager.isInitialized && appStateManager.isSignUp) SignupScreen.page(),

Now let us change the isSignUp bool value when the user taps on the ‘Dont Have Account! Sign In’. So in the OnPressed anaonymous function of the text button write the following function where we change the isSignUp value to true.

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