 Hey everybody, this is Brian. Welcome to the 26 flutter tutorial. I still have a bit of a cold, so forgive me if my voice cracks a little bit. Today we're going to be covering the snack bar. Snack bar is interesting because it allows a lightweight message to be displayed on the screen briefly for the user. Just let some know that something's going on. I wanted to cover this in maybe the alert dialogue before we really start diving into other tutorials. That way when we use them you're not mystified as to what's actually going on. So I've got a blank project here and we're just going to start typing away. We're going to import the material design, make our main function. We want the stateful widget. Then we want to create a state for our stateful widget. I always ask why do people like watching me type? It's so much easier just to say, hey here's a finished project and look at what we've done. But people like watching me make mistakes. I guess it makes them feel a little bit better because everybody makes mistakes. A couple of people said they like listening to my thought process and how I get from point A to point B. I get that because sometimes I walk into a applications code and I'm like, what in the hell is this? We're going to make our new material app and we're going to say home equal new. You guessed it, my app. Why is that complaining? Oh yeah, cold medicine. There we go. You will see many, many typos while I'm on cold medicine. Point in case. Can't even type create state here. All right, so we're just simply fleshing out a state of our application here. We need a state because, well, we're pretty much going to have to need one for almost every application we do. Every time you interact with the screen and you're going to save some sort of data, you got to save that in the state. So first thing we're going to do is create our variable here. Then we are going to, you guessed it, do our override. And this is kind of just boilerplate at this point. We've done this a couple times, actually 25 other times. Let's go ahead and build context, context. There we go. So we've got the bare bones of our application here and we're going to flesh this out. Now, really what we're going to have here once we get this going is we're going to have an app bar followed by a text box, followed by a button. And when we click the button, the snack bar will appear down at the bottom. So let's go ahead and actually build out this application. New app bar. I hate having a cold. It's like I'm like here, but I'm not here. And I think I'm doing the right thing. And then I'm not like the other day I went to make toast and I put the bread in the refrigerator and stood there for like five minutes waiting for it to get toasted. And then it occurred to me it was just getting cold. So yeah. All right, so we ended we're adding a container. So if we wanted to put some padding in there, we could. I don't think I'm going to really play around with padding, but just in case somebody downloads this code. And there's our new center and inside the center, we're going to say child new column children. There's our widgets. We'll say new text field and new raised button. Let's go ahead and run this and see what we got. Just make sure it looks the way we expect it to. And I'm actually pretty amazed. A lot of times I'll build the application and run it just to quote unquote make sure it runs. Part of that is because Flutter is an alpha, but you know, I've never had. I was just going to say I've never had one crash on me, but I guess I just did. What is the problem here? Open again. That didn't work. Lost connection to device. Let's figure out what's going on here. Installing, syncing files, host new host connection, fatal signal 11. Let's look at our code and see what's going on here. Well, let's try debugging this and see what happens. I've actually never had one of these crash on me before. This is interesting. Of course, now it runs. Interesting. Wonder why that crashed. It is working. All right, well, let's just kill it and rerun it. Raise button. We're going to add in a couple properties here. I was going to say, now I'm a little embarrassed. I was going to say that I'm actually really impressed with the way Flutter has been so far. Even in alpha, I've never had anything crash, but I guess it was the first time for everything. I'm kind of happy that happened while it was on camera here because it's just kind of interesting to see. Makes me wonder what happened there. Although I'm not sure if that was a problem with Flutter or a problem with my emulator here. A lot of times people are very quick to kind of blame Flutter for its shortcomings when it's in alpha and the reality is it's really not Flutter's problem. All right, so let's get rid of that. Want to run this one more time just to make sure. Apologize for the delay, but that made me a little nervous that it did crash. It's working. All right, well, we'll just continue on then. If you're new to mobile programming, don't get discouraged by that. I've worked with Reniac Native before and it is a little glitchy at times. I'll write code and I swear that it'll work. I'd bet my life on it and of course it doesn't work. It crashes and then I have to figure out some weird error message. It's just kind of the state of mobile programming at this point. So the first thing we want to do is actually track that variable. So yeah, we're going to do that through the set state. There we go. So we're just going to take this on change and we're going to monitor the on changed in the text field. Oops, better put this in here. There we go. So when on change is triggered in the text field, we're going to pump out that variable to our on changed value. You could very easily take the set state and put this right here. But I wanted it to be very obvious what's going on and I wanted to kind of break that out without making it look really ugly down here. All right, so we're going to show the snack bar in this one. To do that, we have to add a little bit of magic here. And this is going to take a little bit of discussion. And admittedly, I'm not an expert in this either. So this kind of the blind leading the blind here, we need to make what's called a global key. And you see how it's a generic type. So it's global key extends the state of a state for widget. So we're going to say global key of the scaffold state. And we're going to call this scaffold state. All right, so first off, what is a global key? What is even a key? Well, a key is a way of identifying something. A global key is a unique key across the entire application. That being said, there can only be one of these scaffold states across the entire app. So let's actually add this in here. And we're going to use that. And then in our show snack bar, we're going to say, actually, let me modify this just a little bit here. We don't want to show a blank snack bar here. So if it's empty, then we're just going to get out of there. All right, so we're going to say scaffold state, current state. And then we're going to show the snack bar. First thing it wants, of course, is a snack bar. So we're going to say new snack bar. And then we've got some content in there. And I'm going to break this down a little bit. So it's a little easier to read. And in here, we're just going to say a new text. And we're going to say the value that we're trying to display. Let's actually put this on the same line there. There we go. And then on here, when we press the button, we're going to say show snack bar. And we're going to use that text variable that we're holding in state. All right, let's run this out. And there is our snack bar at the bottom. If our keyboard was hidden, it would be down here at the bottom. So that's really a snack bar. It's just a little instant notification on screen display and let the user know something happened. So you could say something like if you were in a settings dialogue, and they click the save button, you could just say like settings save, that way they know something happened. It's unique to the application because we're using global key. So I believe I haven't tested this, but I believe that if we were to use the navigator and switch from one screen to another, that state or that snack bar would still show up, it wouldn't automatically disappear. But I haven't fully tested that yet. So don't quote me. So that's it for this tutorial. Thank you for watching. I hope you found this educational and entertaining, the source for this and all other tutorials will be out on my website voidrums.com. Just go out here and click on this big github link. It takes you right out the tutorials. And if you're so inclined, join the Voidrums Facebook group. There are 1700 other programmers out there that we can definitely help you out with your coding problems.