 Hey everybody, this is Brian. Welcome to the 29th Flutter Tutorial. Today we're going to continue our conversation on some basic widgets, and we're going to cover the checkbox. Checkbox is a pretty basic little component, or I should say widget, but one thing we're also going to cover is the checkbox list title, which is an interesting widget. It's a kind of a combination of many, and we're going to go over that as well. So let's just jump right in here. I'm going to import our, you guessed it, the Flutter Material Package, and we'll make our simple pattern here. You think I'd have this down, but like in my sleep by now. We've done this so many times now. My app state extends state. We're going to extend the state of my app. We're going to do the run app function. Let's do this. We're going to do a new material app. We're going to do my app. Let's get that out there so we can see what we're doing. Kind of excited for Christmas. It's like a couple days away here. We've got our state. We're going to build this out, and we are going to return a new scaffold. All right. So there's our text. All right. So now we're ready to get down to business here. Save our work. And the first thing we're going to do is we are going to, well, you guessed it, we're just going to add a new checkbox. You can see how we have value and then on change. So you can already see that we've got some interaction here. And this is very similar to the text field, which we covered the last tutorial where we have to track on change because this is a stateless widget. It's not going to track it for us. So the first thing we need to do here is we need to say bool is check equal false, copy that, grab our value, then set state. Let's actually make this private. There we go. So now we're going to track the value of whether or not that is checked. So we're going to say the value of this is checked. I should say it is the is checked variable. And we want to track that through the on change. So we'll say bool value. There we go. So let's push this out and see what it does here. Where is my emulator? There it is. So pull our emulator up and wait for this to deploy it. It's going to take just a second. My computer's running slower than normal. I don't know what's going on with this thing. I think it has a cold. It caught the cold that I had. So you can see dead center of this is our checkbox and we can check it and uncheck it. Not very helpful. So we need to snazzy this up just a little bit. So let's go out here. Let's just completely grab this thing and we'll say new row. And in our row, we want a new text and we'll say click it. That's not liking that for some reason. What's going on here? Oh, I know what I totally forgot. Children. There we go. All right. So we initiated a hot reload. You see it says click it and we can check it. Uncheck it. Check it. Uncheck it. But if we click the actual text, click it. Nothing happens. You got to actually tick that little box. And if you have big fat fingers like I have, it's not very fun. So what we're going to use next is what's called the checklist box tile. That is a fancy name for much better than what we've been working with. So let's just do this. And we'll say new checklist box tile. And bang, you can see how instantly it almost has the exact same signature. Well, actually does. So we can just copy this whole little bad boy right here. Instead of re typing all that garbage out, wait for our hot reload. Did it hot reload? No, it didn't. Let's just push it out. Uh oh. Dependencies could not be established. What? Expected defined. We screwed something up here. All right, let's figure out what we did here. Unchanged bull. What is this messing up on me here? I see what the problem is. We're missing one. And trusty hot reload works as we expect. So now we've got this little guy over here. Now because we have linked these when I say linked, I mean they're both using the same variable and we're tracking that variable through set state. When we click one, the other one's going to change also. That's the magic of state. If you didn't really understand state before, maybe you just had a light bulb moment. Just kind of go over this again. Both of them are using the same variable. And we're saying unchanged. So both of them are saying unchanged. So it doesn't matter which one we do. It's going to change that variable because they're both have the same variable and that variable is being set through set state. It's going to track the state of that variable, whether it's checked or unchecked. Thus you get this dual action going on here. So that's nice and all, but we still have the same problem where we have this checkbox and nothing else. So let's fix that. Let's break this down just a little bit. All right. So first thing we want to do here is add a title, new text. Click me. You can see how now we can click the text and it acts. This whole thing acts as a check, as a giant checkbox. So we've kind of done this where we have a row with the text and that, but the whole thing is now clickable. And let's just say we want to do active color equal colors dot red because we want to really differentiate this bad boy. And we want secondary. And I don't know what to just say home. Why not? So we're going to add a few things here. So now we have an icon and it changes the color when it's active. Pretty neat, huh? So that is the checkbox and the checklist tile. It's called a tile because well, it's in the shape of a tile, but it makes life a heck of a lot easier. So if you've got really finicky users or a really finicky production manager and he doesn't want to try and click this little guy, you can just use a checklist tile and life is good. That's it. Thanks for watching this. I hope you found it educational and entertaining. If you're looking for the source code for this and the other tutorials, once again, go out to my website, voidromes.com, click on tutorials, go out to GitHub, go out to Flutter and you can just clone all of the code right down to your machine. And if you're still listening, you're one of the cool people, you are invited to join the voidromes Facebook group. We have 1700 other programmers out there. And I had a few questions. People say, why are you always plugging the voidromes Facebook group? Because it helps me when I have a question. The first thing I do is go out there and ask and then I usually get like two dozen people with answers. So that's it. Hope you find it educational and thank you for watching.