Flutter Navigator 2.0

Nov 8 2022 · Dart 2.17.3, Flutter 3.0.2, Android Studio 2020.3

Part 3: Use the Navigation

12. Display the Login & Sign-up Pages

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 11. Display the Splash Screen Next episode: 13. Navigate to the Home 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.

Learn more Already a subscriber? Sign in.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

Now that we have displayed the splash screen successfully, we want to display the login screen after two seconds of the delay. We have already given the condition in our pages array to display the login screen. Now, we have to change the isInitialized value to true when our init is done, so that our appStateManager will communicate with a router and display the login page. Now, navigate to the splash screen and override a stateful function called as didChangeDependencies. The didChangeDependencies will be called when the dependencies are changed or is reloaded. We do not need the initState function, so I will remove the initState function from our file. We are going to call the appStateManager's initialized function in our didChangeDependencies function. And we will be using Provider to do that. Our initializeApp function has a timer, which after two seconds makes the initialized value as two, and we notify the listener. Now let us reload our application to see what we get. So we have the splash screen, and after two seconds we get the login screen. Now let us navigate to sign up page from login page. In our book_router_delegate, I will add the sign up page with a condition. The condition will make sure that our app is initialized and the isSignUp is also true. Now let us change the isSignUp bool value when the user taps on, "Don't have an account! Sign In" button. So in a login screen, scroll down to the button, "Don't have an account! Sign In." And on the onTap, where we have a function which navigates to the sign up screen, we will set the value to true. Now, let us load the application and see if you're able to go to the sign up page from the login page, and you can see we are at the sign up page.