 Hey everybody, this is Brian. Welcome to the 30th Flutter Tutorial. Wow, we've got 30 of these so far. Today we're going to be covering radio buttons or radio as they're called. There are these little circles you've seen them before where you click one and the other one unchecks and it goes back and forth and you have little groups of these guys. So that's what we're going to cover today. We're going to do the bare basic implementation because these are still kind of beginner tutorials. Let's just jump right in here and we've got our material package. We're going to extend the stateful widget. We're going to extend the state of the my app. We're going to do run app, make a new material app, new my app. We've done this before, I'm just trying to flush this out as fast as I can here. Override and then we're going to say my app state, create state, that is this thing, isn't a type. Well, prop if I did that. All right, so let's actually flush this out now. Widget. All right, so I like that widget. That was interesting. All right, so we have this. Now we need to build this out and render it. And we're going to say return new scaffold. And let's do that. Bang. Ooh, new title. I don't want a new title. I want a new text. Where am I getting these things? I think I'm just typing too fast for my brain. All right, so then we have our body. All right, so we've got a center. Let's actually make new center. That way it actually works. And all right, so we've got a new column here. And this is where we're going to deviate a little bit from what we've done in the past here. I know if you've been watching some of these, you're probably going, okay, the same old design pattern over and over and over again. We're going to actually do this a little bit different. What we're going to do here is we're going to make a function called make radios. And we're going to call this right here. And this function will actually generate the radio buttons for us and wire everything up and make it all nice and neat. And we'll return our list out. So first thing we need to do is actually make some of these. So we're going to say list.add new radio. And you can see how it's got a value, a group value and an on changed. We're just going to save that and run this out. So the value while this thing is loading, the value is the actual value of this specific control. If you were to select that the group value, because remember radios come in a group, the group value would be the value selected within that group. And the on change, of course, is this is a stateless widget. So we have to track that state. And here is the radio button, all its glory. It's disabled because we are not tracking the on change, which is why it's grayed out. As you can see, we have kind of the same problem we had in the last tutorial with checkboxes where we don't have text or anything. So we're going to follow a very similar pattern here. And we're going to just say, hmm, I'm going to add a row. Children, we're going to add a new text. My background music died on me. There we go. Sorry about that. My headset has like this time out. And for whatever reason, I can't get it to not time out. So if I don't have some background music, and it's not registering through the microphone, so if it's not playing anything through the speakers for I think like a minute, it shuts off really annoying when I'm recording a video. Okay, so we're going to say radio button, actually just call it radio. And then new radio. And then we have our stuff here. So let's say the value of this is zero. And we need to actually track a value here. And we're going to say, oh, could I have misspelled that anywhere? There we go. And we've seen this before. Very, very familiar design pattern where we have to track the change and set the state. And we're going to say, selected equal value, bang, grab this on changed. And we want to track that change here. Now the group value is going to be the selected, selected value here. So what's going on is we're going to have a row. And in that row, we'll have a text field or just a text that says, you know, radio. And then next to it, we're going to have the actual radio, which is going to have a value the group value that shared through them all in on and on, on we track change. So we're going to just grab this, push that out through hot reloading, see what it looks like. Sure enough, bang, that works. So let's just do this for push that out. Hmm, that didn't quite work the way we wanted it to, did it? There we go. So now we have three radios, radio zero, one, two. And you see when we select one, the other ones are not selected. That's the group value right there. We're currently tracking that in there. And we can actually just say value zero, value one, value two. So we can see which ones which now we have a very similar problem that we had with the checkbox, which is this text right here. If we were to try to click that, nothing happens. And if you have big fat fingers like me, you're not, you know, a 10 year old Asian kid. It's really hard to kind of click these specific little things. So as you might have guessed, when we go into the documentation, similar to the checkbox, there's a radio list tile. And the radio list tile is very, very similar. And we're going to actually flash that out right now. So let's jump back into our code here. And we'll say four int equals zero, less than three. All right, so I'm going to say list dot add new radio list tile. And you see it has a very familiar signature here. And we're going to break this out a little bit, just so it's easier to kind of see and understand, actually push that out there. So the value we're just going to say I, whoopsie, I, the group value is selected. And the on change is the actual value. Now when we look at our hot reload, bang, we have three. And we have similar to what we had in the previous tutorial where they share the state, so that you can understand what's going on with state. And you can see now if we click off, it's the entire row. And we're going to fill those values in right now. So let's actually go in here and we're going to say title, new text, give it that title right there. And we've got our on changed here. We're going to say active color, colors dot red. And we're going to give them a subtitle of text. And we're just I have no idea what to put here. So we're just going to say subtitle here. All right. And of course, our favorite, the secondary, give it a new icon. And I never know what icon we're just going to say home. Why not? And something more productiony, you would actually say, you know, an icon for each one. And let's push that out. And tada, in all its glory, we now have much, much fancier looking radio buttons, or I should say, radio list tiles. Very simple, very easy to understand control, very robust. And it's kind of one of the founding fathers of all controls ever since the dawn of graphic user interfaces. So pretty simple, pretty easy to use. One thing we haven't covered is how to have like groups of these. It's a little bit more complex, but I just kind of wanted to let you know how that worked. All right. So thank you for watching. I hope you found this educational and entertaining. The source code for this and all of the tutorials is out on my website void realms.com. You can click on that, and then you can just simply go out to flutter and bang, you pull down the source code for all the tutorials all at once. Also, if you're so inclined, join the void realms Facebook group. There's 1700 other programmers out there. We can definitely help you out if you have any questions.