 Hey everybody, this is Brian. Welcome to the 24th Flutter tutorial. I'm going to apologize in advance. I have a bit of a cold and my throat is pretty sore, so I may have to pause the video in certain points. What we're going to be doing today is we're going to actually build a demo application. So the first thing we want to do is import the Flutter material, excuse me, package. Like I just said, man, this cold is just kicking my butt. Let's see what cold medicine encoding can really do here. So I'm going to run our app. I'm going to say, oopsie. We're going to kind of take what we've learned so far and add a few things here too. So this is going to be a little bit of an adventure for all of us. All right, so we've got our MyApp, which extends stateful widget, and we're going to have to do some things with that. What we're really going to be doing here is we're going to be building out a basic login. And when I say basic login, I mean very basic login. So we're going to say, I need dinner ideas. I have a cold and nothing really sounds good. I have like this really hot soup that I've been eating, and I'm just, I love it, but I'm getting kind of sick of it. It's like if you had pizza every single day, you know, you'd just be like, I'm done with pizza. Forget this. All right, so we're just going to make a new material app. Maybe that's the cold meds right there. I'm going to blame every mistake in this tutorial on the cold meds. And my voice is cracking. So I sound like I'm going through second puberty here. All right, there we go. And we're going to make a login demo. And then we're just going to make our app bar. Whoops, can't do that bar yet because we need a home with a scaffold. There we go. Friends don't let friends have colds and write code. Man, this is just going slow. All right. Whoa, new flow. What the heck? There we go. A new app bar. Jeez. And let's get this, let's do this the right way here. Sorry, I was kind of multitasking there. I was looking at my phone, taking a drink of water and writing code all at the same time. That takes some skill, my friends. Let me tell you. All right, so let's actually change this to please login. Okay. So really, all we've got there is we've got our app bar and now we're going to add some actions here. And then we've got an array of widgets. And we've done this before. So this is really nothing new. We're going to say icon button. And the icon is going to be just a new icon. Or say icons.home. And then we're not going to mess with on pressed yet. Magic of copy and paste. Let's say exit to app. And we're not going to mess with that on pressed yet. We're just going to start our emulator with that startup while we're typing away here. You can see it's starting in the background. All right, so what is this? Missing concrete implementation of creates. Oh, yeah, yeah, yeah. Let's do this instead. Don't know why I keep doing that extends state for widget. There we go. And then we can make this extend state. All right, this will be a little better my app state. And then we're going to say create state my app state. Hmm, one too many equal signs. There we go. That should be a little better. All right, so our emulator is up. We're just going to start this application and kick it off to emulator just to see what it looks like and get a basic idea of what we're going to be doing in this tutorial. Now that we've got a kind of the skeleton of the application all set up and ready to go. Soon as this thing finishes building. All right, there we go. So what we've got here is just a please log in with our app bar. Two icons, they're great out because we don't have the on press filled out. And then we've got a home and then a log out button. And what we're going to have here is a basic username and password login. And if we're not logged in, it's going to default to the username and password login. If we are logged in, it's going to show the settings screen kind of like a poor man's way of password protecting your application. So let's do that. All right, so what we need to do now is actually flesh these out a little bit more. Let's go into our lib. And we want to create two new files here. We'll create login.dart. And let's create settings.dart. And we're going to flesh this one out first import package flutter material extends. And we're going to make state list widget because we don't want this tracking the state here. And we're going to say override. Yeah, I don't know what it is about Michigan and this weather man. Every time it gets cold, I get sick, which sucks because Michigan's always cold. So I'm almost always sick. It's actually not true. Girlfriend's been sick. So I'm sure I caught something from her. You know, that's usually not a good way of saying something about your girlfriend. I caught something from my girlfriend. But anyway, you know what I mean. So we're just going to center in a new child center in a new child center in a text. And the text is going to be the child of the center. All right. And then we're going to say settings here. Nothing real fancy about this. We just want to show something on the screen. Let's just jump back into here. Give me just a second here. Sorry about that. I had to get a drink of water. All right, so we got the package login app. And we're going to say settings dot dart. And down here, we want the end of the app bar, we're going to actually say the body next. And let's jump over to our emulator here. We're going to rerun this. And while that's building, we're just going to fingers crossed. So this is basically what it's going to look like after we log in. What we're going to do next is we're going to actually build the functionality for these buttons and the login. The login is going to be a little bit different because we're going to actually make a custom component in Dart, I should say in Flutter. And we're going to have it use what's called callback. A callback would be like this right here on pressed. We're going to actually build one of those into our custom component. And that was a little tricky for me at first. It took me a while to figure that out. So lucky for you, I actually did figure it out. I should say lucky for me kind of took a while. It was kind of making me mad to be honest with you. I was like, what the heck? All right, so we've got our title. Now what we want to do here is we want to say, whoops, we want to probably help if I did that one correctly. Huh? There we go. So soon as we flush those things in, of course it didn't pick it up, but those are now enabled. We'll have to stop and restart the app. I'm just going to let it compile while I'm typing here. Uh-oh. That's why it didn't pick it up. It's missing our semicolon in there. There we go. All right. So, and of course, yeah, now it's complaining about the semicolon here. So let's push that back out. Suddenly, magically it works and these buttons now work. They don't actually do anything. So what we're going to do is we're going to say log in out. There we go. Just so that we can see these actually do work, you can see it that's now printing out and it's printing out again. So we got home, go home and log out. So those buttons are working. All right. Now what we're going to do is we're going to actually flesh out this login component. And this is going to be a little bit of typing and a little bit of explanation. So bear with me here. So we want our package flutter material and we want our import package flutter widgets. We want import foundation. What we're going to do now is we'll say class login extends. We're going to make a stateless widget. And what we want to do here is we want to actually make the constructor and we want to have a few properties in here. So we're going to say const login. And let's break this out a bit. And we're going to make a required property here. And we're going to say this is going to be the callback handler. Or I shouldn't say the callback handler. It's going to be the actual callback. And then we're just going to add the key. If you're wondering what a key is, key helps identify the actual component. Just adding that in in case anybody uses this in the future here. And I actually screwed up a little bit here. Let's there we go. That way it'll turn that into our name parameters. All right. So we want to avoid callback. And this will allow other people to use this component and callback. And what a callback is is exactly what we've worked with in the past here. For example, this icon button on pressed, we're telling it to callback or go to this function. That's exactly what we're doing. We're building this into our component. A little bit of an advanced topping. And it took me a while to kind of figure it out. But it's actually pretty well rewarding. All right. So now that we've got that, we're going to say static, final, text editing controller. We're going to make a new text editing controller. What a text editing controller does is it allows us to work with a text field. And you'll see that here in just a minute. I realized some of this is probably looks like ancient algebra or voodoo magic or something. It'll be pretty clear once we get there though. So we're going to make getters for the username and for the password through the magic of copy and paste here. So the controllers interface with the text field, which we haven't actually worked with before. So we're going to go ahead and build that out now. And this is just the build of a method that we've seen before. And whenever you see build, think render. So what we're going to be doing at this point is actually rendering. So we're going to say return new. We're going to say column. And we want an array here. So what we're going to add now is you guessed it new text fields. And text fields are a little bit different than some other platforms out there. You got to work with them a little differently. So we're going to add in the controller. And we're going to add in the username controller. And then we're going to say decoration equal new input decoration. And in here, we're going to say hit text equals gives the user a little bit of an understanding of what they're supposed to be doing here. Just going to copy and paste that. And then enter password. Now, because password fields are well passwords, we don't really want to give them the ability to see what we're typing for very long. So what we have to do now is actually say, oops, obscure text is true. I don't know if that's very viewable. There it is. Obscure text is true. And then of course, the final thing we want to do is a new raised button. And the child of this is going to be cannot seem to do that today. There we go. And in the on press, we want to actually call our void callback on submit. So looking at this code, really what's going on here is we have a stateless widget. Remember, we're not going to hold the state because it's stateless. We have in the creation in the in the constructor, geez, cold medicine, we have a key, which would help identify this, but we're not really using it in this tutorial. I just wanted to show you can do it. We have a required parameter and we're using this on submit on submit is actually avoid callback, meaning we're expecting this to call a function somewhere else in some other code. We have text editing controllers, both of them for username and password. And those are being used by these text fields. There really isn't a super easy way of getting the text directly out of the text field, you would use either the on changed or the on submit. And what the text edit controller does is it just holds that into a variable, which we can grab using the getters. So we have the user dot text and the password dot text. Whoo, that is a lot of explanation, a lot of typing that took me a while to figure out. Now we've got to try to figure out how to kind of comb all this together, if you will. So let's push this back out, make sure there's nothing wrong with the app. It runs as expected. Now you notice how we've got this new settings right here. Well, we want to kind of replace that a little bit. What we need to do is actually have it so it shows a specific screen. Now, I want to say that this is not the correct way of doing this. You should use routes and navigation, but we haven't gotten to routes and navigations in our tutorial yet. So we're going to use this method. So for more complex apps, please use routes and navigation. Excuse my voice, it's kind of getting a little raspy. But all right, so let's see what we got here. I need to pause the video for just one second. All right, sorry about that. I had to get a drink of water. I was really losing my voice there. So now that we have that, we need to do here, say widget, screen. And notice how we are not declaring it, or I'm sorry, we're not setting the value of that. We're also going to make a few other things. Well, we can't because we have not imported it yet. Hold on a second. There we go. And then we're going to say settings. I'm going to review this video once I'm done. And if my voice just keeps going in and out too bad, I may redo this whole thing. We'll just see how this works when it's all done. Usually I don't actually watch the videos after I do them. All right, so you notice how the first thing it does is it says, Hey, for the login class, it wants a void call back on cement. And you remember the login class is this guy that we just typed out here. It's because of that required parameter right here, that it's actually automatically putting that in there. And then we're gonna say, let's just say that may not be what I want here. I am kind of deviating from my notes a little bit here. So for the body, because that's going to change, we're going to use a variable, we're not going to just hard code it and say new, we're going to say, during the creation of this, the screen is going to be settings. And as we shift around in this code, it will actually change. So we've got our widgets, we've got our login, and we've got our setting here. Now we want to actually flesh out this on submit. All right, and then we're just going to print out that Hey, we're trying to log in here. Now if you're wondering where you're getting the username and password from, we are creating an instance of this login class, this guy that we just typed out. And we have getters username and password. And that's where we're getting those. And they're just reading the text value from, I should say the text property from the text editing controllers. So that's how you're getting those. All right, now, whoopsie, we need to actually set this. Let's just stop this, rebuild it, make sure we don't have any errors. While that's rebuilding, I'm going to get a quick drink of water because my voice is going out again. All right, so compiled as expected, nothing's really going on here because we haven't done anything. So we're going to change that. And we're going to get to the heart of this thing and make it work here. All right, so we're going to set authenticated. And what this is going to do is this is going to set state. You remember from our previous conversations, when you set state, well, you're setting the state of this screen, and in this part of the application, trying to figure out what to get my girlfriend for Christmas. She gave me a cold and a sore throat. I'm wondering what I should get her in exchange. I don't know, maybe I'll get her something that makes a lot of noise at like three in the morning or something, paybacks, you know. All right, so what set authenticated is going to do is it's going to set the state. We're going to say if it's off, then we're going to set it a certain way. Otherwise, we want to set it a different way, meaning we want the state of the application to change depending on whether or not they're authenticated. So we're going to set our screen to, we're going to say, and then we're just going to grab this guy right here. So if we're not authenticated, we want to set the login screen, and then we're going to say, please log in. All right, so now that we've got the set authenticated method, you can see how it's grayed out, we need to actually use it because it's currently unused. To do that, we want to actually say, so log out, and then we want to put it go home. Go home is going to be a little bit different because if you're already authenticated, you need to actually go in here. So let's say go home. So now we need another variable here. See, this is what happens when I go off script. I really shouldn't do that, but so we're going to start off not being authenticated here. All right, so if that, well actually, let's do this. Okay, I got lost in my museum there. Cold Medicine made me space out. That's what I'm going to blame it on. There we go. So really go home doesn't really do anything. It's kind of a pointless button. I'm not a big fan of pointlessness, but so let's save this. Let's recompile the whole thing, make sure there aren't any major issues, and see what happens here. It's still showing settings. Let's figure out where we go. So here's our screen. That would probably be why right here. All right, so we want to start with the login. Let's push this back out. All right, so now it's displaying, you know, inner username, inner password, and then submit. And if we just enter something, that's not going to work. And then, and then hit submit, you can see that it actually tried to right here, log in with blah, blah. So what we need to do now is actually say, hey, can they log in? So we'll say, and do not ever, ever, ever do this in a production application. This is just for demo. You will get fired. It will burn your village to the ground. And well, everybody on the planet will die. Realistically, you would want to go out and authenticate against the database or something of that nature. We just haven't simply gotten to the point that the tutorial is yet. So you want to set the authenticated to true at this point, because you have now authenticated them. So let's kill that, push it back out. I don't know why I do that. I really don't need to. I could have just hot reloaded it, give it a good build, make sure everything works. All right, so we're going to just enter some garbage here and bang, you can see how it tried to do it. Log in with Q and R. But of course, we didn't have that. So let's actually say our new caps lock, get off their user. Let's delete this. And because we successfully logged in, you can see there's our setting screen, we hit home, and it just goes right back. Log off, log in, things of that nature. Now, home really isn't working the way I expected it to. Let's look at this. If it's authenticated, go to settings otherwise. So let's evaluate this little guy here. Actually, let's just do this. I want to see what's going on under the hood there. All right, home false. So let's evaluate this again. All right, so we've logged in with username and password. Let's click on home and see what's going on here. That's why this is still false for some reason. I bet we did not set it in our state. We didn't see that's what the problem here is. Really, we don't need to do a set state here, but I'm just going to do it anyway. We really don't need it because it's not part of the application state, if you will. It's just a variable that we're using in the background, but I'm going to set it in state anyways. All right, so now when we run this, we will actually, there's our settings. If we hit home, it does nothing because we're currently authenticating. You see where it says go home true. The premise of this being if you were to time out or something in the background, you'd hit home and bang it would just say nope, and we can log out. And if we hit home, see now it just says hey, you're not logged in. So that's it for this tutorial. I hope you found this educational and entertaining. Some key notes here. This is not, I want to say, the best way of handling the situation, but it's where we're at tutorial wise. So definitely read up on how to extend a stateless widget with required properties and things of that nature. Another thing you should know is I actually ran into a bit of trouble on this and I had to go out to the support and I had to go out to live discussion with the Flutter engineers and they helped me a little bit. I kind of figured it out on my own while I was waiting, but I just wanted to put that out there that you can really get in here and ask some really great questions. I think our conversation is actually in here. Yeah. Right here. So do not flood these poor folks with all of your little nit-noy questions. For that I would actually recommend going out to the Voidrums Facebook group, joining up and asking questions in there. And for the source code for this and all other tutorials, go out to voidrums.com, click on tutorials and go to GitHub. Leave me some feedback. If my voice is absolutely horrible, I'll redo this whole video. All right, thanks.