 Everybody's Brian. Welcome to the 23rd Flutter Tutorial. Today we're going to be talking about two things. The app bar and state. State is kind of this weird ambiguous term, but we're going to try and break it down a little bit. Before we really dive into that, if you go to flutter.io and you click on sample catalog, you'll see there is full sample code to, well, pretty much complete applications. And it works. I'm just amazed that this is in alpha and it just, everything's working so far. It just shows the amount of brain power that's really gone into this. Now what we're going to be doing today is working with the app bar, which is this little blue bar, which we put up there, but we're going to put buttons up there and make those work. We're not going to blatantly rip off this demo that they have up here. I'll leave that for them. But I want to kind of key in on some other things. So I've got a new project up called app bar demo, and we're just going to start typing away here. So import and we're going to import the flutter material dot dart package. Remember, we need that to work with the material apps. Then we're going to say, and we're going to do run app. And in case you either don't remember or didn't watch any of my previous tutorials, run app is kind of the main entrance point to your application. So without run app, nothing runs. We're going to leave that blank for now. We need to make two other classes real quick here. We're going to extend the state full widget, not the state list widget like we've done in the past. And then we're going to make a private class called my app state extends state of my app. So before we really start fleshing these out, what are they? Why do we need them? Okay, well the first thing we're going to do is we're going to do main and then we're going to run app. So we're going to run my app. An instance of my app will be created. I actually should create that there. An instance of my app will be created and shoved out in the memory. Now, I shouldn't say shoved out in memory shoved out to the emulator, which I'm going to actually boot that up while I'm talking here. And then I'll just go off to the side while it starts up. Now we have the state full widget and state. Now in the past we've worked with state list widgets. What's really the difference here? Well, a state full widget and even a state list widget is what's called immutable, meaning it will not change. And I'm actually going to put this will not change. Okay, well, that's great, but we want to actually change something on the screen. So what we need is a state which will change. Man, I cannot type today. So to get these two to work together, what we need to do is we have a state full widget and we're going to actually override the create state. So effectively what we've done here is it looks like a bit of a circular reference, but we're saying the my app state, which extends states. So just don't think of this as my app state. Just think the state is going to be the state of my app, this guy. So our immutable widget will have a state inside of it. Now in our state, the my app state, we can do certain things. For example, we can say string. That's great. We haven't really done anything there. And let's say my state. Let's make this private as well. Just to have a similar code convention here. Now you notice how it's already barking at us and it's saying it's missing a concrete implementation of state dot build. Remember in previous conversations, whenever I said build, think of build as render, we're going to build or render the widget. So we need to override and then we're going to say widget. There now we're actually not doing anything. So we need to combine some of the knowledge that we've learned in previous tutorials being a material app and scaffold. So first thing we're going to do here is we're going to return a new material app. And don't forget your little semicolon at the end or it will get mad at you. And we'll say the title is the title variable and we want the home to be a new scaffold. Now this is where things get a little interesting here. Remember, we're building this in state. You really don't have to do that. You could actually have this as a stateless widget and then have certain parts of it be stateful. But for this example, I want all of this to be the state because it gets a little kind of cumbersome and complex when you're doing only certain parts of it. I want you to understand what's really going on under the hood here. So we've got our title. We've got our home. And then in the scaffold, we want a app bar. We've talked about this before. And in our app bar, let's just get that in there. I'm going to set that to the title variable as well. Now, what's it barking about here? String can't be assigned to the parameter type widget. Why are you doing that? Oh, yeah, because we got to put a widget in there. My bad. That screwed me up for like a microsecond. I was like, what is going on here? All right. So we've got this. Now that we have our home, we want to put in a body and we're just going to say the obligatory hello world. And actually, let's change this around a little bit. I want this to be a little fancier than this. We're going to put in a new container padding. Don't know why I picked 32. Just good old days when icons were exactly 32 inches or 32 inches. 32 pixels. That's the kind of day I've had. And we're going to say new center for the child. If you have no idea what I'm doing, this really should be old school for you by now because we've been doing this for like 20 some odd tutorials. And then we're just going to pump our new text right there. Now remember, everything in Dart is an object. So we're going to go ahead and run this on our device. Whoops. Actually, let's do this. There we go. And we're going to just base this thing build and runs. If it doesn't, then we'll resolve any issues that we have. I'm fairly confident it will run though. Now I did have some feedback and I do try to keep up on feedback, but my inbox is just looks like a bomb when off at any given moment. So it's really, if you email me, it's luck of the draw. That's why I keep caution for this Voidrom's Facebook group. But they said, you know, why does it take so long to build? Well, you have to kind of have to have respect for what's going on under the hood here as you're taking a language, compiling that into another language and then compiling that into whatever the device needs and then pushing it out to the device. So there's a lot of middleware going on there. All right, so here's our app bar. Here's our hello world. So far, nothing's happening. We can't really click on anything. So what is state? Well, what we want to do is we want to change this hello world depending on some sort of user interaction. That's the state, the state of the application. Think of state like you have a parent. You ask your mom, hey mom, can I go stay over to friend's house? Well, depending on her mode, her state is going to depend the answer you get back, right? So we're going to just jump out here into the app bar. And this is why I do like, you know, pushing these out into different files because they can get a little big. But for this example, I'm just going to keep everything all nice and neat. And we're going to say actions. You notice how this takes a list of widgets, but it doesn't give you the actual code you need. So you need to say widget. And there we go. So we're making a list of widgets here. And then we're going to say, hmm, what could we put in here? Well, we could put just about anything we want because it's a widget. So we can even say like new text. We'll just say la la la la. And let's do that. Save that flip back over. Oh, didn't like that. Oh, it's because I got that in there. There we go. You see there's our text up here, la la la la la. Now, what that really means is we can put anything we want up there because everything is a widget. So let's just start putting things in there. Let's say we're going to say new icon button. It knows how to ask for an icon and pressed. So there's two properties that we're going to have to fill in. We really don't have to because they're null, but it would probably be a good idea if we want any sort of real functionality here. New icon. And then we're going to say icons. And then we have tons and tons and tons of icons to choose from here. I'm just going to grab some at random. I'm going to say like add alert. And then on pressed, we actually want to give this a function. All right. So here we're just going to say, if you're wondering what this is doing, this is basically saying, hey, use this function and call this code. Now notice the syntax here is a little bit different. It's saying press semicolon. And then we have this anonymous function. Here's our scope brackets. We've talked about scope before. And here is the code we are using now. Notice the underscore, meaning this is a private method. You can't call this directly out of the class. And then here we're just going to print the message. That way we can see what's going on. And we're going to grab this a few times. What's going on here? I forgot my commas. Now some things to note right off the bat is, we're sending it an array of widgets. B, the icon we chose is over in the left here. It gives us a nice little preview of what we're going to do here. And if you're wondering how these icons actually got into the application, well, they're included. That's right. You heard me correct. They're included. I don't want to print out. Let's say people. Is there a people? There is a people. So you can see how we have like an alert, a print, and a people. And if we actually run this, I'm going to stop and just rebuild the whole thing. I was seeing some errors popping up there. I just wanted to rebuild the whole thing. Make sure it's going to work here. All right. So we've got our beautiful little icons. And let's say P, print pressed. And people pressed. I like pressing people. People piss me off sometimes. So I like pressing them. All right. So we had our hot reload. And let's just click this. You see nothing happens. So, I mean, on the screen, nothing happens. But we can see it here. We're getting a lot of action. And what's going on in the hood is we're actually reading directly off the device. And there's our print statements. Print pressed, people pressed. That gives you a good way of telling what's going on in the application. So what we want to do now is when we click one of these, this guy right here will update. That's called application state. So far, we haven't actually done anything with state. So because we're calling this method, we know that we can do some things. The first thing we want to do is actually change a variable, which we're going to change this my state. And let's actually do this. So what we're doing now is the child in here of the center is going to be the my state variable. So you can see it's now blank because we have absolutely nothing in my state. Let's just type in no state. That way it's pretty obvious what's going on here. I didn't actually like that. Let's rebuild it just because I want you to see that that variable equals no state. And what we're going to have to do once this is built and gets up and going is we're going to actually have to call something called set state. And what set state does, you can see now there's no state and nothing's changing because we haven't changed anything yet. But what set state is going to do is it's going to set the state of this variable. I mean, for example, if we just say my state equal test, actually, let's set it to the actual message. Let's see what happens here. Hot reload should have taken and I'm going to reload it anyways. And we're going to just, you see how nothing's happening. We're even going to kill the application and restart it. I know it takes a little while to recompile, but we're going to push it back out here just so that we can see that nothing's happening. Give it just a second. It should pop up. So there's no state and nothing's changing. Now we are changing the variable under the hood and we can test that by actually doing this. See, our print is still working. You can see how there's print pressed down here. There's all your pressed up there. So we know that variable is actually changing, but the state is not changing. That's what I'm really getting at here. So what we're going to do here is we're going to say set state and you notice how it calls out a function. So what we're going to say is, maybe, there we go. Just going to make a simple little anonymous function in here. And in our set state, we're going to actually update the state. This is going to be a little confusing because it's literally the same thing that we've just done. We just did this. Set state takes, and this is a little difficult to explain. So bear with me, but there is a memory map under the hood called state. And what set state does is says, hey, find the key that has this variable and set the value. Unless you do that, the state's not actually going to change. So let's run our app again, see what happens now. And while this is compiling because it's not there yet. Basically, we have our material app. In our material app, we have a scaffold. You need the scaffold to kind of build things up. In the scaffold, we have the app bar and we have the body. The app bar, we have three icon buttons. Each button has a built in icon that we can preview over the left. And it's calling this pressed method. And then in the body, we have a container, which has a child of center, which has a child of text, which is actually reading the my state variable, which is right up here. We're changing that. You guessed it in the set state. So you see how we have no state. Now we have alert press, now we have print press, now we have people pressed. This is needed because if you go like this and you just kind of jump over to a different program and then kind of jump back, you can see the state is saved. If you didn't have the set state that would blank out and everything would go right back to default, which if you've ever worked with any sort of like Android programming before using Android Studio, you've noticed that right off the bat, how you have to load the state automatically. Well, or you have to load it manually, where this is all loaded automatically for you. I have to say this is a lot easier to work with than some other things that I work with, such as like MobX and Redux and things of that. Redux just broke my brain. I must have spent two weeks playing with different applications trying to get it to work correctly. And it's absolutely hated Redux. MobX was a little better, but I think this is really fluid and really simple. So while we're on the topic, because I did say we're going to work with the app bar here, what kind of things can we put in the app bar? I mean, we know that we can put text in here. We can put icon buttons. You can see, well, maybe you can't see it because it's under slow mode. I hate that little slow mode ribbon. Let me move that up here. You can see there's our text. Let's try to add a raised button. Why not? So there's our raised button. And what we want to do here is we want to say, we just want some text on there. And we've done this before. I think we had it in the body actually. But what we want to do now is actually just put it in that app bar. And I don't think we actually made the button work in the last tutorial. So let's make this work. We call this super button of doom. Why not? It's been a Monday. Build that. And you can see now we have our text. We have our little icons. And we have our super button of doom. So you can put pretty much any widget up in the app bar. It's not really restricted like it is in some platforms. And you notice how that the text actually puts these little dots or these ellipticals in there. And we can rotate the device. And you can see how it automatically rotates with it. And then it expands it back out. So it's pretty neat the way this works. And we can do some really cool things. So there's our super button of doom. And that's it for this tutorial. Some quick notes. If you want the source code, you can go out to my website, voidrums.com, click on tutorials, click on GitHub. And it takes you right out to the actual tutorials. And I've got many, many other tutorials and other languages. If you're so inclined, feel free to donate my websites 100% run off your donations. And if you're still listening, you're one of the cool people. Be sure to join the Voidrums Facebook group. There is, I think, coaching on 1800 other programmers out there all walks of life. We can definitely help you out with your projects. If you email me directly, I'll try to get back to you. But it's probably going to take several months at this point. My inbox is just annihilated. That's it. Thank you for watching. I hope you found this educational and entertaining.