[Music] hey what up guys welcome back to another quick flutter tutorial the widget of today is going to be a list view and by extension i'm going to go over the list of view builder as well and in which context each one would be suitable in so i've got here a blank scaffold with nothing inside so in there let's put in a column which is what i covered in the last video and i'm just going to show you a problem that you'll run into when you use columns and rows so inside the column let's just create a basic container of height 200 and let's just give it a color as well now in columns we can have multiple widgets inside right now the problem that you'll face is when the column becomes full you're going to have this overflow error this is a situation where it will be appropriate to use a list view and the other crucial feature of a listview is that it's scrollable you can imagine a lot of apps are going to want to have a scrollable list you can also specify this physics property to be never scrollable if you want but most of the time i would want this to be a scrollable list so let's just get rid of that one now on a very basic level this is how you use a list view but just to show you a couple of good coding practices when you have a lot of widgets in the children one of the things that you should be getting into the practice of doing is to encapsulate the code to make it cleaner so what that means is i'm going to just create another file in our library and let's call it just square dot dot and i'm going to import my material.dart file and let's just create a separate widget here and let's just call it my square then we can paste what we coded up earlier into this separate file so this way we can encapsulate the code and it will make it much more cleaner so instead of all of this repetition let's get rid of this and now we can just create my square and if you do if you need to make any changes to this square then you can just do it in the square dart file so now we can have five squares here makes it much more easier to look at now a basic list view is appropriate when you know what you want to store in that list but in practice you might not know exactly how many objects to place in there so for example if you think about like an instagram feed it's never a fixed number of posts that you have like if you keep scrolling it creates more right so in that case we want to be able to dynamically create this list so just to illustrate this i'm going to create a separate list and let's just call it posts and so in this list let's just create a few strings i'm just going to call it post 1 post 2 paste 3 and so on so once you have this list then what we can do is instead of just creating a basic list view you can create a list view dot builder which basically builds the list dynamically so what that means is in this item builder if we just give it a current context and then index and let's return the square now now when you use builders you have to specify the item count so this is going to be how many items that you want to create now obviously you can just give it a fixed number like three or one and it'll create that many of those squares but what's really useful about this is for the item count you don't have to specify a fixed number you can say just however long the post list is okay so post dot length so this way it's gonna automatically be in this case three but if i add more to our posts the length would become four so this way we can dynamically create our list and just to take this a step further in this square we can also give it a child and so let's pass through a parameter and create the constructor for this parameter and specifically i actually want a string to be passed through so let's require a string and let's display it as a text widget so you can see now in the my square it's got a red squiggle because it's going to require us to provide a child and the child i want to provide is the post at whichever index i am at currently here let's actually send to this widget so you guys can see it properly and maybe let's get the font to be a little bigger but you can see how we would use a list view builder and by the way this sort of philosophy of coding is called object oriented programming so that's what i'm showing you here and just to make it a little bit more practical i'm going to create a very basic layout for the instagram ui because in that ui it uses vertical scrolling for the posts and also has horizontal scrolling for the stories so i'm going to illustrate how we can use list views for a ui like instagram now i'm going to wrap the list view in a column so that i can have the stories on the top and the posts on the bottom and if i just show you this error you can see it says the render box was not laid out so what that means is when you have a list view you have to specify a height for the list for you to to fill up a couple ways you can do this so on a very basic level you can just wrap it in a container and specify a height for it so let's say like give it a height of 300 and so that's where your list view will belong but what's more useful than specifying a fixed height is you can wrap it in a expanded widget which is also one of the widgets i covered in the last couple of videos and so you know that if you put an expanded widget inside a column it's just going to fill up the entire space so this is going to be our posts and above this let's create our stories so for the stories again firstly i'm going to show you the naive way you would go about doing this which is to use a row and we'll see the problems that we'll run into if i just create a little container here that then make it pink let's make it a circle as well since the stories are all round whoops you should specify the color inside the decoration so if you place enough of these you're going to get to a point where you run out of space so it's going to have a bit of overflow there as you can see so again this is when we would use a list view oh and this is the error that we ran into earlier we have just give it a specified height so if i just wrap this in an expanded widget this should take care of the problem now if i just save this it's going to be vertical scrolling by default and as i said by default it's going to be a vertical scroll so you can actually specify under the list view the scroll direction to be horizontal and so that's what we want for our stories and just to clean up our code a little bit let's encapsulate our circles into a separate file just like we did for the square and let's grab one of these circles so instead of having all of this code repeating let's just grab one of these and separate it out now we can delete all of this and let's create a list view builder and we're going to return my circles or my circle rather and make sure that all of these are imported at the top and we need to specify the item count as well as the scroll direction we wanted to make that horizontal so for the item count instead of specifying a fixed number like three we can treat it like the same as what we did for the posts so let's create another list and call it stories this time and let's have a few stories in there so story one story two three and maybe let's create another one story five cool so now we can just dynamically create it and for the item count we can just say stories stories.length this way our code becomes very nice and usable and just so that we can see exactly what's happening let's give the stories a child so that we can pass through from our homepage so this is just the same thing as what we did for the posts of course so now we can pass through our child to our circle we should actually center this text widget and there it is cool and just to make it more realistic the last thing i'll do is if you use two expanded widgets that's a ratio of one to one so that's why the screen's split into halves so i actually want the bottom to be an expanded widget because i want that to fill up the rest of the space whereas i want the top section to be a little smaller right so a couple ways we could do this you could change the flex property for the second expanded widget to make it much bigger but what i recommend is instead of using flex in this situation just leave the second one as an expanded widget and the first one instead of using an expanded here just give it a fixed height so let's wrap it into our container and the height let's say 150 and then the second widget is just going to fill up the rest of the space so i think this is more appropriate in this case so this is pretty much everything you need to know for how to use list views as well as list view builders and just to sum up it's almost an extension of rows and columns except for the fact that you can now scroll through okay so columns and rows you can't actually scroll so hopefully that was clear enough and you guys understood how to use not just a list view but also a list view builder which is extremely helpful if you can understand how to use the builder now if you're interested in how to make the full instagram ui i actually made a video for that as well so check it out but other than that that's it for this video and i'll catch you guys in the next one ladies [Music]