Flutter Tutorial For Beginners #7 - Page Navigation

Key Takeaways

[Music] hello everybody and welcome back to the flutter tutorial so in today's video what we're going to be doing is actually dealing with page navigation and we're going to be continuing to build this app that we've been working on since the beginning of this series so what we're actually going to be doing is making a home page which will kind of let us type in our username we're not going to do any passwords or validation or anything like that at least for right now but we'll let the user type in some name and then that will be the name that they're given when they actually create a post because if you notice right now whenever we make a post we're just simply putting tim as the name but obviously if someone else is coming onto the phone or someone else is using the app their name is probably not tim so what i'm going to try to do here is make a page where we can get the user's name and then i want to pass that over to the home page that we already have created here so that when they actually make a post the author of that post is whatever name they typed in so that's what we're going to be working on here but the first thing i want to do is actually show us how we can clean this code up just a little bit so looking through this code here we can see it's starting to get a little bit messy and there's quite a few different things in this file and they're not all really related to each other in any way so what i want to do is i want to make a bunch of different files that store all of these different classes just so that as this app continues to get larger and larger it's a lot easier for us to figure out where things are and keep things kind of separated into what they actually are doing so to do this all we're going to do is just make a new file inside of this lib folder so you can see on the left hand side of my screen here i'll zoom in just a tiny bit hopefully that'll be a little bit better for you guys but now let's go to lib let's create new file and what i'm going to do is i'm going to name all of these files whatever the classes that i'm going to store in them dot dart so in this case i'm going to make one called post so i'm going to say post.dart like that and now i'm just going to simply take this post class like this and i'm going to delete it from here and put it inside of this file there we go that's as easy as it is now we're going to have to handle some import statements and all of that but that's what we're going to be doing is just separating a few a few things out and then we'll go in and import everything that we need okay so next uh my app so i will leave my app and this void function in this main file right here which is the one that runs but i'm gonna take everything else out and separate it where it needs to go so first let's take my home page so this is a stateful widget so i'm going to grab my home page like this i'm going to copy all of that let's make a new file let's call it my home page dot dart and let's put it in here awesome now ignore all of the squigglies we'll fix those after so let's delete that from inside of here now we're going to take our text input widget now i just realized and someone had actually commented this so thanks to whoever did that we have a spelling mistake in this i'm sure you guys probably saw that but i just realized so i can simply add a d there to make that actually widget instead of widget or whatever it is right now but i'm just going to simply copy this and i'm going to find all references or actually sorry i'm going to hit ctrl h so ctrl h is find and replace so control h on the keyboard and instead of text input widget with just the g we're going to put the d where it needs to go so now hopefully that should change everywhere so i'm just going to keep hitting hitting enter to change it everywhere that we need to change it and there we go so regardless fix that spelling mistake i'm going to grab this whole text input widget now i'm going to put that inside of its own new file so let's go text input widget like that dot dart okay that's looking good let's go back here we can get rid of text input widget which we did now let's make a post list and i think that should be the last thing yes it should be all right so now one more file new file and let's call this post list dot dart we can put that in here and now let's start handling our import statements so in all of these files i'm going to take this first import statement here which is importing the flutter material.dart which essentially is just what we need to use um that gives us things like material apps stateless widget all of the stuff that we've been using that is kind of proprietary to flutter so we just need to import that in all these different files so we're going to import that one here we're going to import that one in text input widget like that and then in my home page as well now we don't need to put inside of post because post doesn't use any flutter stuff it's just our own class that we created so we don't need to actually import the flutter material package because we don't use that here now inside of my home page which i am right now we can see that we have a post so i need to import the post class so we can use that and then i also need to import text input widget which is now going to have to have a d there instead of just the g as well as post list so let's import all of those so to import those all we have to do is just import the package that stores them so we're going to go import our single quotation marks and then inside of here i'm just going to use the things that i need to import so in this case it's going to be post dot dart like that and let's just copy this and what else do we need to import we need to import post list dot dart and finally i believe we need the text input widget so let's get that one okay so text input widget post list and post so that's good for this file looks like this one has some problems right now so let's import post because we need that so we're gonna say import and it should be post dot dart awesome and anything else in here no that one looks good and then my home page we need to import my home page so let's do that sorry not my home page from the main file let's import oops my home page dot dart okay sweet so now everything is imported and if i've done this successfully let's look at our emulator here and i think everything should still be working yeah it looks like it is so actually when i type some text for some reason the text is not showing up maybe i need to reload this app just to see if that's going to work all right so i was realizing that for some reason my messages weren't popping up when i was typing something in so you can see like i was go like that and just nothing would show up and then i realized that's because i called the widget callback after i cleared the controller field so of course we can't do that what i need to do is i need to call this callback before i actually clear the controller field so that was just a silly mistake on my part so if you guys have that same mistake make sure you fix that that's just inside of text input widget inside of the click callback method or whatever you want to call it i just have this widget right here after the clear so of course we got to swap those around so let's just have a look now and make sure this is working because for some reason i couldn't get that and there we go so now it's working looks like our like buttons are working as well and now we just need to actually make the original kind of login page if you want to call it that so that these authors will be accurate based on what we typed in so what i'm going to do is actually make another file and i'll show you how we can navigate between pages but let's make the page first and then we'll do that so new file and this case i'm just going to call this one login dot dart and then now let's just make a login page so i'm going to steal this import from one of these packages here that we need so package colon flutter slash material.dart and let's now make actually a stateful widget that's going to hold our login page the reason i'm making it stateful is because the user is going to be typing in text there and ideally i would like to save the text that they have typed in there so say they exit the messaging app and come back in or sorry exit the page where they're messaging and go back to the login page it has the last thing they typed in so let's go ahead and do that we're going to type stful that stands for stateful if you press enter it brings this thing up which we've seen and now what i'm going to do is just call this login page like that okay so super simple and then what i'm going to do is inside of login page state i'm going to make a string and i'm just going to call this name so string name like that awesome and that's really all we need now i'm actually going to go over to my home page and we can see that my home page is using a scaffold with an app bar and a body and all of this so what i'm actually going to do is i'm going to steal what we have right here and i'm kind of going to kind of replicate this story over in login so inside our build method i've just copied all this scaffold stuff let's put it over here let's replace container and now we have our own scaffold now we're not going to be using text input widget or even a column at all here for body so let's actually get rid of all of that but we will make our own body in just one second i can get rid of one of those set of brackets okay so now just keep things clean i like to usually do this i'm just going to say actually should we do this yeah let's go class body like that and we'll actually have to make this a stateful widget so let's go stateful widget let's just call this body inside of here and then we can simply go body and we can put body like that now that actually means that i don't think my login page needs to be a stateful widget i think i can just make this a regular widget and then actually the body can be a stateful widget that stores the name so let's do that my apologies on that guys we're going to keep this scaffold so i'll copy that but i'm going to delete everything else i've done here and just make a regular widget so i'm just going to make a stateless widget if you type st it should show up here and you can tab to it and we're just going to call this one login page like that and then we'll return the scaffold with the app bar and the body awesome so that's what we need for login page i think that should be good for now i'm just going to check my other screen to make sure i didn't mess anything up yep so that looks good to me and now let's actually go inside a body and let's add a state not there sorry but inside of here for the name so let's say string name like that awesome now i'm also going to make a text editing controller here we're going to need to put a text field right that the user is going to type into so we're going to say text editing controller which we've seen before i'm just going to call this controller equals new text editing controller like that awesome so now we have our name and we have our controller and now let's actually start kind of building the ui here and putting what we need so what i'm going to do is inside of my build method i'm actually going to start by putting in a line class what this is going to do is allow us to align our widget in the very center of the screen i think we used this previously but it's really easy to use you just go align and then you can pick the alignment so alignment is one of the arguments here and then i'll say alignment dot and you can simply put oops if i spell alignment right you can simply put center so that will put it right in the center of course if you want to put it somewhere else you can put it in you know bottom center bottom left bottom right so on and so forth we're going to keep it in the center like that and what we're going to do is we're going to say child and we're actually going to make the child equal to padding and i'm going to add some padding for whatever widget we decide to put in here and i just want to make sure it's separated off the walls a little bit so it doesn't seem like it's extending the entire screen and give it say like you know 10 pixels of padding or something like that so we're going to say for padding we're going to go padding colon and then i think we can do edge oops edge insets like that and then we're going to do dot all and what this says is what padding do we want on all sides of the widget and in this case i want to put 10 pixels of padding on every side and then we're going to go child for padding i'm going to add a comma oops and i was hoping that was going to tab us down a line but for child now we'll put the text field that we actually want to display so essentially we've done is we're aligning everything right in the center we for the child of this alignment has 10 pixels of padding so we're going to put whatever inside of here will be padded by 10 pixels on all sides and then we're going to put a text field so we've used text field before we're going to say text field like that and if i click save it brings us to a next line i'm going to say controller colon controller because it's going to be equal to the controller we have here we could reference this with this dot controller but it doesn't matter whatever way we want i guess i'll just leave this here to differentiate and then what else do we need for our text field well we need that input decorations we can add um you know a border we can add a nice little label text or something like that so let's go i believe it is decoration that's going to be equal to input decoration if we come on hit enter here let me go to the next line awesome so input decoration which we have right here and then for input decoration there's a ton of different stuff we can put in here like we can put you know a prefix icon a suffix icon the text we have what happens when we press the button all of that and in fact if i go over to text input widget which is one of the files we have right here we can actually see all the stuff for decoration right here so rather than typing all this out again i'm just going to copy what i have here for text input widget so all the stuff related to input decoration you can see prefix icon label text suffix icon icon so on so forth so let's take all that and let's simply replace that here okay so i actually copied the decoration tag too that seems okay um is all good here am i missing a bracket yes i am so let me add one more bracket and there we go now the indentation is correct and now let's just start changing some of these things that actually make sense so rather than type a message i'm going to say type oops type your name like that so that will be what our what do you call label text is for the prefix icon this is the icon that comes before where we're actually typing i'm going to make this a person so i'm going to say icon dot people or is there a one for person awesome there is now the reason i'm making it person is because like you are typing in your name so i figured that makes sense and then for the suffix icon rather than making it a send button let's make it a like finish button or something do we have that or like done yeah done you know check button that's fine for now we can leave it at that uh the color blue is fine and the tool tip do we want post message probably not let's just do for this button i guess let's say submit you know that's good enough that's all we really need the on pressed we have this dot click so that's fine let's actually make a method inside of here which it can be called so we'll call it this dot click and that will just handle what happens when we actually press that button that's within this text field so for anyone confused right now the input decoration is storing the prefix icon is storing the label text and it's going to have the suffix icon which is actually going to be a button that we can press to submit our name so exact same that we did when we were looking at text input widget now in fact i actually want to add one more thing here i want to add a border just so that it actually looks like it's surrounded in something so to do this is actually kind of hard i was struggling to make the border last time but i think what you do is you go outline uh oops not outline button this should be outline input border so that's what we're putting here for border this should say you know outline an input field with a border and then inside of here what we need to do is actually put i think a border sign or something along those lines so i believe it is border side and that is equal to border side and inside of border side what does it take it has a color and a width so we're going to go with and we'll make that however wide we want to be i'm just going to make it 5 pixels wide and then for the color what do we want this to be i'm going to say colors dot and let's just make it black you guys can of course change that to be whatever you want but for me i just prefer to have it that actually let me get rid of that okay so now we have the border now all we need to do is add this method for on pressed so i'm kind of over the place here but hopefully you guys are following so let's add a method let's say void click and this is what will be called now when we press this button okay so i know this looks like a mess but again hopefully it makes sense and what we're going to do is we're simply going to set this name equal to whatever the controller text is and then we're actually going to navigate over to the next page so i'll show you how this works but let's go this dot name equals controller oops dot text like that okay and then what we're going to do is navigate over to the other page so first of all let's go to main dot dart and rather than rendering my home page let's start by rendering this login page so the login page which oops so i can find it here is just simply going to have that one field on it we'll render that to start and then when they press the button we'll move over to the message page where we'll know what who the author is and then from there they can move back they can change their name so on and so forth all right so instead of my home page let's go login page like that and do we have login page imported we do awesome we imported login at the top there so i'm going to close that so we have home is equal to the login page so now technically we should be rendering this and before we even move any further let me actually just see if this is working and awesome there we go so this is what it looks like this is kind of the field we've created of course change anything you want but we have a nice border it says type your name we have the person icon and we have the little check mark so if i type something blah blah perfect looks good to me okay so now we need to make a way to actually navigate over so to do that we're actually going to type navigator like that and we're going to say dot and i believe this is push so the way that this navigator thing works is essentially you can think of this as a stack so when you push a page onto the navigator it goes to the top of the stack which means that is the page we're currently going to be viewing so think like a stack of plates right if i push a plate on top of the stack of plates then that is the current plate that's the plate i can see it's at the very top if i pop that plate then what that means is i'm popping from the very top and i'm removing that plate so you're going to see how this works when we actually navigate over but the whole point of this navigator class is to keep track of where you've gone so if i keep pushing different pages onto the navigator class every time i press back i will go in the opposite order like back through the pages right so the most recent page i was on i'll go back to that one and then back to the previous one and so on so forth so that's how this thing kind of works so the main methods we're going to use is push and pop so you can pop meaning simply just go back to wherever i came from that's what that is saying or you can push which means go to this page that i'm about to show you so i hope that kind of makes sense but anyways we're going to go navigator.push we're going to type context and then we're going to do oops if i can get this going here material page root which is just telling us okay we're moving to a next page and inside of here i need to type builder and this is kind of a lot it's not doesn't make perfect sense and i need to context arrow and then i need to pick where i actually want to go which in this case is going to be my home page which is right there okay so let me save that uh did i import my home page or i did import that or it automatically imported i guess when i did this but essentially what i'm doing is i'm saying okay we're going to navigate uh with the current context which is just a variable that tell we need to pass when we're doing this we're going to go material page root this has a builder parameter here this takes a context and simply calls my home page so that's what this is doing it's just pushing this on to the navigator stack and then we'll load my home page and you'll see that when we're on my home page if we click the back arrow we simply pop off the stack and we can go back to where we came from so let's actually have a look at this all right so if i'm in here now and i do hello and i press that button you can see that brings us over to this page and if i click click the back arrow it brings us back to the original page so that's what this navigator class does you can see there's these nice animations and clicking that back arrow actually drops it down whereas pressing the arrow um to go to the next page brings it up right so there's specific animations for each operating system when you use this navigator class and that's why we're using that we could technically just render a widget in place of where we are but this is a better way to kind of deal with navigating between separate pages all right so now we're here and what i'm going to do is i'm just going to type say hello or something like that and oops jillo that's fine you can see that the name is tim so now we need to handle how can we actually change the name we've got the name they're typing it in but we need to actually pass that to my home page so that it can use it properly all right so we have that click you know whatever this.name equals controller.txt navigator.push now let's go to my home page and let's change this so that rather than just using tim here we're going to use whatever name we actually pass to my home page so since my homepage is a stateful widget what i'm going to do is i'm going to say string oops actually final final string name like that and then let's go my home page and inside of here we're just going to say this dot name so we're simply just setting up a constructor here that says okay every time we make a new home page pass me a name right so that when we load this we can just pass a name in and then it will use that as the author now we need the same thing here so instead of using what do you call it instead of using tim in new post we're going to say widget dot yep dot name like that and that should be all we need to do on the my home page side to actually get this operating properly so now let's go back to login.dart and notice that we're getting the squiggling line now on my home page so all we need to do is simply pass it a name so we'll just say this dot name so now whenever we go to my home page we give it a name and hopefully it's going to use that as the author so let's check this uh oops uh unimplemented handling of static target already change i think that just means i need to reload this not sure i just think it can't handle that um if we in the hot reload if we do something crazy like that okay so restart application looks like this is working let's try this now hello let's press the check button brings us over here let's type something and there we go now the author is hello so let's go back let's change this to be tim like that and now let's type something and now the author is tim so the author changes based on whatever we type in on that first page now you may have noticed that when i go between these two pages here it doesn't save the messages that we had there that's fine we're going to deal with all that once we start looking at the database stuff and how we actually populate this list originally but for now i think that's all i'm actually going to do in this video so quick recap there what we did here is separate everything out into a bunch of different files we worked on this login page and then we worked on actually getting it so that we could change the author based on the name that the user typed in so that's kind of the start of say if we wanted to have some kind of login system now obviously when we move to the next page we know what user is there and we can do something with that user so anyways if you guys enjoyed this video make sure you leave a like subscribe to the channel and i will see you again in another flutter tutorial