 Hey everybody, it's Brian. Welcome to the 34th Flutter Tutorial. All right, today we are going to cover the list view, and I actually didn't find it out in the widget catalog, but if you go to the sample catalog, they actually have quite a few of them out here, like I think that's one, that's definitely one. And they use something called a card, which we're also going to add in here, but we're not going to do any of their tutorials. We're going to do something totally different. If you have no idea what a list view is, some good examples just by doing Google Images Flutter List View, you can see some really good examples. You can have, you know, compound controls, what I call compound. I mean, there's more than one thing in there, like there's an icon, there's a text, and there's a checkbox, things like that. You can make some pretty interesting combinations of things. So really, it's just a list that shows things going from top to bottom, and you can add different things in there. So that's what we're going to be working with today. We're going to do a pretty basic example. List views can get very, very complex, very fast. So import, and we're going to say package, flutter material. All right, we're just going to set up our normal application here, extend the state of my up here. Let's get rid of that because that was rather annoying. All right, so now that we got our my up here, we're going to override, and we're going to say, make a new state for our stateful widget. All right, then in the state, this is where the action is really going to happen here. What we're going to do is we're going to say, we're going to make a list of boolean values, and we are going to override the init state, where the semicolon came from. Whenever I do something like that, it really just kind of scares me. I'm like, oh no, what did I just screw up? All right, so here we go. We're just going to set the state on this, and we're going to say for, and we're going to say, we're going to just set everything to false by default. And then we are going to, my fingers are cold, it's like freezing outside. Even with the furnace going full blast, it's still cold in here. All right, now we want to return, not wrecked, return new scaffold object. I'm going to make an app bar, and on that, we're going to say the title, and we are just going to say, this is a list review demo. All right, so this is where things get a little bit different here. We're going to say a new list view, and you notice how there's a couple different these. There's list view with normal, list view dot builder, and list view dot custom. We're going to cover list view dot builder, because this is kind of like the standard of what almost everybody's going to be working with here. Custom is obviously pretty self-explanatory, or not self-explanatory. It's when you want to do something completely out of the left of field there, where at list view itself, I think you actually hand it a list of things, and it just kind of tries to figure out what you're doing. I've had nothing but problems with that, so I always use list view dot builder. You see how the first thing it wants is an item builder, and this takes a little bit of explaining, but it's very simple to understand. So when you have a list of items, and let's flip back to our graphic here, you notice how they're all kind of standard size here. So what this needs to do is it needs to know how many of them there are, and what sort of dimensions they really have, so it knows how much the user is going to be able to scroll, and things of that nature. So you can see how this is different than say this, or even say that, you know, they're just different shapes. So let's go back in here, and what we need to do is really look at this guy, and we're going to say item count equals data dot length. That way it knows how many items are in our data. Now the item builder itself, we want to actually turn that into a function here, and we want to say build context, so we can hand over the context if we needed to. I hope I spelled get build context, right? That was somewhat embarrassing, there we go. And we want the index. The index is going to be the index in the internal array that the list view is going to be working with here. And we're going to tie that into, you guessed it, our list. We should probably put that semicolon there, we're going to have nothing but problems later. So now that we have our item builder somewhat going here, we need to actually do something with this. So what we need to do is you guessed it, return a new widget. In this case, we're going to return a card. So let's save this. Let's run this and let's just see what we got so far here. I kind of want to explain it as we go because it gets a little bit in depth, but it's kind of easy once you wrap your head around it. A lot of frameworks, especially in the old days, would not allow you to do some of the things that Flutter's allowing you to do, which is add custom compound widgets in. All right, so you can see there is our app bar, and there is absolutely nothing here. So we need to figure out what's going on here. Probably the first thing you'll notice is that we did not add in the correct data. So we have a new card. And in here, we're going to child new container padding, why not 32.0? Because I love that number. And then child in the container, we're going to have a new column, whoops, new column filled with children. And the children in there are going to be, let's just kind of move this up so you can see it. So there's our index. And then we are going to add in a new checklist title. And the value of this little guy, actually, let's break this down so it's easier to see what's going on here. Initialize our hot reload. You notice how soon as we did this bang, suddenly we've got items in here, because now we're actually using that value, and it knows what we're trying to do with it here. And we can scroll. So that's what the list is really giving us here. So what we're going to do now is we're going to really make these things come to life. We're going to actually drop this down to five instead of 32. We're going to set the control affinity. And we want this to be list time control affinity dot leading. So as we do that, that checkbox should jump over. Now it's over on the left. And we're going to fill some of the stuff in here. I don't know what I want to put in here. How about we just say new text, kind of going off script here. There we go. So you notice how this is grayed out? It's because we don't have this on change actually. Anything is just null. So once we fill that in, this will suddenly work. And then we'll tie that in using state so we can update our list in the background. So let's go ahead and do that right now here. All right. So that's state. All right. So we're going to say data index value. So we're just setting the item at that index within the list to the value of whatever the on changed was here. And here we're going to say full value on change. And then there's our value and our index. Save this. Now suddenly, automatically, it works. Pretty simple, pretty easy to use once you understand. Some key features you really have to wrap your head around is a use the list view dot builder. It's much easier to work with than some of the others. You'll always have to give it a length. And when you do the builder, just understand that you can put any type of widget out here. So we've actually got each item has a couple widgets in it. There's a text and here is a checklist tile. And that checklist tile is actually made up of a checkbox and a text. And I'm assuming something in the background so you can click way over here too. And it's all embedded inside of the card. So it's pretty awesome the way this works. And we can actually, let's just do this from a hot reload on this. You see how now, maybe now we have to rerun a whole thing from start. There we go. So now it'll just go and go and go and we've got all the way up to a thousand. Pretty simple, pretty easy to use. And personally, I like it. I mean, compared to other frameworks out there, it is just ridiculously simple to work with. If you've ever had to juggle like list view adapters and models and things like that, it's such a pain. This is so much easier. So what you should really tie into is you'll have some sort of back in data. In this case, I just have a list of bulls, but you can have a list of any sort of class and then have the data inside of that class. So you can have a list of people, a list of dogs, a list of pets, a list of airline tickets, whatever. As long as you're tying that back in through the individual render here and the item builder, you're good to go. All right, so that's it for this tutorial. I hope you found this educational and entertaining. Be sure to check out my website void realms.com for the source code for this and all of the tutorials out in GitHub. And I think they're under flutter tutorials, they say better be. And if you're still watching, go ahead and join the void realms Facebook group. There's 1700 plus other programmers out there. We can definitely try to help if you have any issues in there every day. And I know a couple of the other admins are actually looking at flutter very seriously themselves. So definitely check it out. Thanks for watching.