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 we are done with showing the splash screen and the login screen. Now let us start by showing the home screen after we press the login button. So right now if I'll come back to login screen, you can see I am using the old navigator one function to navigate to home screen. We have to change that and we have to use the new navigator two function to navigate to home screen. The only issue that we have that we can navigate to home screen from two routes. First login screen and second is sign up screen. Now if we have to write the logic and the function to navigate to home screen from both this screen. So first let's start with writing the function in our login screen. I am going to use the app state manager's login function with the help of provider to log in to our app and go to the home screen. As we know we are not using the username and password, but for now let us pass a dummy username and dummy password. Now let us open the book router delegate and add the following condition to display the home page. So I will navigate down to our build function of our book Router Delegate and we will add the condition of our home page. Refresh the application and check if we are able to go to the home screen. After initialization, login button, and I'm ready to go to the home screen. And this is done with our navigator two. Now let us write a similar function in our signup screen. So let me refresh the application which will bring our app to the login screen and "Don't have an account? Sign up" button will take us to the signup screen. So now here it is showing the signup button. Just like we had a login function in our app state manager we will need to create a function called as on signup completed, which will notify our application that the signup is completed and we have to take our app to the home screen. So let us create a function over here. It assigns a true value to our on signup complete variable and then we notify the listeners so we can use this on signup complete condition in our book router delegate. So let me come back to our sign up screen and instead of using this navigator one function, I will use the newly created function of our app state manager with the help of provider. Let us reload the application and see what happens. So now we are at the initialization screen, the login screen, and then now we will click on signup button to get to the signup screen. And now let us click on the signup button and you can see that nothing is happening. This is because we have not changed the condition that we have written in our book router delegate to display our homepage. So I will change this app state manager "is logged in" condition to a different condition. So first of all, I want to go to the homepage if this condition is true. So I will keep this condition. To add a condition and we have to make sure that our on signup complete is true. Okay, so there are two routes. So if AppStateManger.isLoggedIn is true or if AppStateManager.onSignUpComplete is true then we want to show the homepage. And now let us refresh the application and check if our condition is working. And you can see going to the signup screen, and then going to the home screen. Yes, our condition is working, but if I'll press the back button, I can come back to the signup page and then if I'll press the login button I can go to the login page. This is because when we are going to the signup complete page we are not removing the signup screen from our stack. And the reason is that we have to make sure that our is signup is false. So open our app state manager and also change is signup to false. So right now there are some more conditions that we have to add. So right now what we are doing is we are just checking that if the application is not initialized we want to show the splash screen. And if the app is initialized we want to show the login screen. We also have to make sure that when we are showing the login screen, is logged in is false. So I will add that one more parameter over here, and I want this condition to be false. And if this condition is false, then only I want to show our login screen. So let me refresh our app right now and we are at the initialization screen. Then we are going to the login screen. After pressing the login button, we have come back to our home screen and now you can see we do not have a back button so we cannot go back. Now we also have to add one more condition over here. We have to make sure that our logged in is true before we reach to the homepage or the second route is that if our on sign up complete should also be true and we also have to make sure that our signup is false. So I will add that one more condition over here and it should be false. So I will add the logical not symbol and logic over here to make sure that this two conditions should be matched when we are routing from our signup screen to the home screen. And when we are routing from the login screen we just have to make sure that is logged in is true. Now let me refresh our app and now you can see initialization. Let us go to the signup screen and you can see we still have a back button. This back button we have, that is because our login screen is still active. So let us remove that as well. And on signup complete, we will also add the logged in variable to be through over here. Now I will refresh my application from here and you can see I am on my initialized page. I can go to login directly and have nothing over here. Let me refresh my app again. Again at the initialization screen, login screen. Let me go to the signup screen. Okay, from signup I can go back to the login screen, as usual. And then if I'll press on the signup button. And now we don't have a back button. So now we can navigate to our application from our login screen as well as from our sign up screen.