Building Multiple Pages in Flutter

Hello everyone, good evening. Today I will be explaining about how to use Multiple Page in your Flutter application. As we already know when we create an Android application, it wouldn't consist of just one page. It will definitely contain more than one page. At the very least, there'll be a Login page then a Main page. Then from the Main page, we can access many other pages. For that reason, I would like to give an example, within this tutorial, on how to make an application with Multiple Page. The application I'm going to make will consist of three pages. The first one wlll be the Login page, and there'll be a login button. When I click the login button, the page will redirect us to the Main page or Homepage. Within the Main page, I will include a button as well that when clicked, will redirect us to a Second, or different page. Then when we click the button on the Second page it will return us to the Main page. However, from the Main page we cannot return to the Login page. So if we click back on the Main page, it will redirect us to the Home Screen of our Android device. and not to our Login page. So, that's approximately what I'll be making. Before I give you a walkthrough on how to create this using Flutter, I'm going to explain the basic concept beforehand. So, the concept of using pages in Flutter is like this. First, the page or screen in Flutter is called a route. This route will be placed in a Stack. You'll learn about stack when learning about algorithms. So, the stack will be used to store the route or a page/ screen in Flutter. Now when we run our application for the first time, the first page/screen to be displayed will be placed as the first layer of the stack. Say I have a stack, and the first layer holds the first page. If we were to use the example of the app we're going to make, this will be the Login page. Next, I will display the Main page. And if I click the button here, it should display the Main page. But from the Main page, we won't be able to return to the Login page right? That means, that the Login page will be discarded and changed into the Main page. OK? So changed. To change that, we will use a command called "Push Replacement". It's easy to remember. Replace, because it'll take the place of something. OK? When replaced, it means we won't be able to go back to it. Push Replacement. Then from here, I will click a button that will show the Second page. This Second page will appear and replace the Main page. However, we'll still be able to return to the Main page right? Meaning that this won't be replaced like the Login page, but stacked on top of (the Main page). so the display of the Main page will be blocked by the Second page. This Second page will be pushed. So, seeing this as a stack, say this is a piece of paper, this new piece of paper will be stacked on top so that the Second page will be the only page visible. OK? In order to do that, we use the Push command on our stack. Afterwards, if I click back, I'd like for the Second page to disappear. To make it disappear, I'll have to remove it again. If I use the paper analogy, we'll have to remove this piece of paper from the stack of papers. To remove it, we'll have to use a command called Pop. So there's Push to place something, like a new screen, and Pop to remove the current screen. Now, Push, Pop, and Push Replacement can only be used on the stack route. Moreover, the "Navigator" is responsible for managing the Stack route. That concludes my brief explanation so let's head over to Visual Studio Code to start coding. I advise you guys to follow along as well. OK, here I have a new project ready. As usual, I have already erased the template code. Now let's make a Stateless or Stateful widget, depending on what you need. If you'll need to use animations use Stateful widget but, if your display'll be static then use Stateless widget. Well, this time I'll be using Stateless widget because there'll only be buttons and nothing fancy. So, Stateless widget, give it a name - "MyApp", then here, as usual, MaterialApp, then here we add home, and usually we'd immediately write this right? Scaffold, and so on. However, this time, I won't do that. I want to show you guys how we can create an application with multiple pages without confusion. Hence, I advise that you, create every page needed seperately. What I mean is this. Here, we usually would code everything in main.dart but this time, we'll create a new file. Give it a name, for example, login... page dot dart Like this. Just copy this. the "import package flutter material dart" text and here we're going to create a Stateful or Stateless widget, up to you, and here I'm giving it a name - "LoginPage" then this Login page will return a Scaffold. Here, I won't be using an appBar because there won't be a title, but immediatly add the body. So, within the Login page there'll only be one button in the center that will say "LOGIN" and just skip the onPressed for now, Shift-Alt-F we won't fill this yet, Just save it. Then we'll make another one for the Main page. So, we'll create a different file for every page, so that we won't be confused when we want to re-edit them, as we just need to find the file that needs editting. That was the Login page. Now, we'll create another - main_page dot dart main_page.dart will be almost similar. MainPage however, I will add an appBar containing the title "Main Page". Then, there'll be a button in the center as well, that if I click, will redirect us to the Second page. So here, I will write "Go to Second Page". We haven't added anymore code. So let's make our Second page first. second page dot dart. The code here will be the same as "MainPage". copy paste We'll change this into "Second Page" then change the button to read "Back" not to the Second page but the Main page. I won't fill this part yet either. Now let's return to main.dart Here, the home won't be a Scaffold, but the "LoginPage". So, the home will display the Login page. Now go to the Login page. In the Login page, if I click "LOGIN" it will be replaced. Replaced with the Main page. For this we'll use pushReplacement. And only the Navigator can do this. So, Navigator dot pushReplacement. Leave this as context, we need to create a route, route is the page, as I've explained before, page or screen. So we'll need to make a screen whose display will be the same as the Main page. So here, Material... Page Route, and we'll create its builder add a semi-colon first. For the builder, it will return the Main page. Shift-Alt-F to neaten the code. Now let's move on to the Second page. I meant the Main page. For the Main page, follow the same steps. Navigator though this time we'll use Push, push context the route will be Material... Page Route The builder will return "SecondPage" Oh right, I forgot to change this to "SecondPage". Shift-Alt-F to neaten the code. Now, we'll move on to the Second page. When I click "Back" on the Second page the page will be removed from the stack. Thus, we'll use pop. Here, Navigator dot pop context semi-colon, Shift-Alt-F OK? Here, "MainPage", wait... erase this, let's redo this. "MainPage" as you see, it shows up here, it should've been main_page.dart not second_page.dart we were wrong before. Well, that's it. So, pushReplacement, then here we use push while here we use pop. F5 OK, so the display should be like this. If I click "LOGIN", it will redirect to the Main page. Then, if I click "Go to Second Page" it will redirect to the Second page, and if I click on back over here, it will return to the Main page, and if I click this, the same happens, it'll return to the Main page. Now, if I click this "Back" button, same thing, it'll return to the Main page. But from the Main page, we will not be able to go back to the Login page. Instead, if we click on back here, we should exit the application. OK, easy right? So, I hope that with this tutorial you'll now be able to make an Android application with Flutter, containing many pages or screens. Thank you for watching, See you next time.

Hello everyone, good evening. Today I will be explaining about how to use Multiple Page in your Flutter application. As we already know when we create an Android application, it wouldn't consist of just one page. It will definitely contain more than one page. At the very least, there'll be a Login page then a Main page. Then from the Main page, we can access many other pages. For that reason, I would like to give an example, within this tutorial, on how to make an application with Multiple Page. The application I'm going to make will consist of three pages. The first one wlll be the Login page, and there'll be a login button. When I click the login button, the page will redirect us to the Main page or Homepage. Within the Main page, I will include a button as well that when clicked, will redirect us to a Second, or different page. Then when we click the button on the Second page it will return us to the Main page. However, from the Main page we cannot return to the Login page. So if we click back on the Main page, it will redirect us to the Home Screen of our Android device. and not to our Login page. So, that's approximately what I'll be making. Before I give you a walkthrough on how to create this using Flutter, I'm going to explain the basic concept beforehand. So, the concept of using pages in Flutter is like this. First, the page or screen in Flutter is called a route. This route will be placed in a Stack. You'll learn about stack when learning about algorithms. So, the stack will be used to store the route or a page/ screen in Flutter. Now when we run our application for the first time, the first page/screen to be displayed will be placed as the first layer of the stack. Say I have a stack, and the first layer holds the first page. If we were to use the example of the app we're going to make, this will be the Login page. Next, I will display the Main page. And if I click the button here, it should display the Main page. But from the Main page, we won't be able to return to the Login page right? That means, that the Login page will be discarded and changed into the Main page. OK? So changed. To change that, we will use a command called "Push Replacement". It's easy to remember. Replace, because it'll take the place of something. OK? When replaced, it means we won't be able to go back to it. Push Replacement. Then from here, I will click a button that will show the Second page. This Second page will appear and replace the Main page. However, we'll still be able to return to the Main page right? Meaning that this won't be replaced like the Login page, but stacked on top of (the Main page). so the display of the Main page will be blocked by the Second page. This Second page will be pushed. So, seeing this as a stack, say this is a piece of paper, this new piece of paper will be stacked on top so that the Second page will be the only page visible. OK? In order to do that, we use the Push command on our stack. Afterwards, if I click back, I'd like for the Second page to disappear. To make it disappear, I'll have to remove it again. If I use the paper analogy, we'll have to remove this piece of paper from the stack of papers. To remove it, we'll have to use a command called Pop. So there's Push to place something, like a new screen, and Pop to remove the current screen. Now, Push, Pop, and Push Replacement can only be used on the stack route. Moreover, the "Navigator" is responsible for managing the Stack route. That concludes my brief explanation so let's head over to Visual Studio Code to start coding. I advise you guys to follow along as well. OK, here I have a new project ready. As usual, I have already erased the template code. Now let's make a Stateless or Stateful widget, depending on what you need. If you'll need to use animations use Stateful widget but, if your display'll be static then use Stateless widget. Well, this time I'll be using Stateless widget because there'll only be buttons and nothing fancy. So, Stateless widget, give it a name - "MyApp", then here, as usual, MaterialApp, then here we add home, and usually we'd immediately write this right? Scaffold, and so on. However, this time, I won't do that. I want to show you guys how we can create an application with multiple pages without confusion. Hence, I advise that you, create every page needed seperately. What I mean is this. Here, we usually would code everything in main.dart but this time, we'll create a new file. Give it a name, for example, login... page dot dart Like this. Just copy this. the "import package flutter material dart" text and here we're going to create a Stateful or Stateless widget, up to you, and here I'm giving it a name - "LoginPage" then this Login page will return a Scaffold. Here, I won't be using an appBar because there won't be a title, but immediatly add the body. So, within the Login page there'll only be one button in the center that will say "LOGIN" and just skip the onPressed for now, Shift-Alt-F we won't fill this yet, Just save it. Then we'll make another one for the Main page. So, we'll create a different file for every page, so that we won't be confused when we want to re-edit them, as we just need to find the file that needs editting. That was the Login page. Now, we'll create another - main_page dot dart main_page.dart will be almost similar. MainPage however, I will add an appBar containing the title "Main Page". Then, there'll be a button in the center as well, that if I click, will redirect us to the Second page. So here, I will write "Go to Second Page". We haven't added anymore code. So let's make our Second page first. second page dot dart. The code here will be the same as "MainPage". copy paste We'll change this into "Second Page" then change the button to read "Back" not to the Second page but the Main page. I won't fill this part yet either. Now let's return to main.dart Here, the home won't be a Scaffold, but the "LoginPage". So, the home will display the Login page. Now go to the Login page. In the Login page, if I click "LOGIN" it will be replaced. Replaced with the Main page. For this we'll use pushReplacement. And only the Navigator can do this. So, Navigator dot pushReplacement. Leave this as context, we need to create a route, route is the page, as I've explained before, page or screen. So we'll need to make a screen whose display will be the same as the Main page. So here, Material... Page Route, and we'll create its builder add a semi-colon first. For the builder, it will return the Main page. Shift-Alt-F to neaten the code. Now let's move on to the Second page. I meant the Main page. For the Main page, follow the same steps. Navigator though this time we'll use Push, push context the route will be Material... Page Route The builder will return "SecondPage" Oh right, I forgot to change this to "SecondPage". Shift-Alt-F to neaten the code. Now, we'll move on to the Second page. When I click "Back" on the Second page the page will be removed from the stack. Thus, we'll use pop. Here, Navigator dot pop context semi-colon, Shift-Alt-F OK? Here, "MainPage", wait... erase this, let's redo this. "MainPage" as you see, it shows up here, it should've been main_page.dart not second_page.dart we were wrong before. Well, that's it. So, pushReplacement, then here we use push while here we use pop. F5 OK, so the display should be like this. If I click "LOGIN", it will redirect to the Main page. Then, if I click "Go to Second Page" it will redirect to the Second page, and if I click on back over here, it will return to the Main page, and if I click this, the same happens, it'll return to the Main page. Now, if I click this "Back" button, same thing, it'll return to the Main page. But from the Main page, we will not be able to go back to the Login page. Instead, if we click on back here, we should exit the application. OK, easy right? So, I hope that with this tutorial you'll now be able to make an Android application with Flutter, containing many pages or screens. Thank you for watching, See you next time.

Transcript for:Building Multiple Pages in Flutter

Transcript for:
Building Multiple Pages in Flutter