Flutter Tutorial For Beginners #5 - ListView (Part 1)

Key Takeaways

[Music] hello everybody and welcome back to another flutter tutorial so in today's video we're going to be talking about list views so we're going to be building the part of our app where when we actually type something in here so say i type hello and i press enter rather than just popping up as plain text underneath here and being overridden anytime i type something else here it's going to actually pop up in a list and that list will be scrollable so that it can have infinitely many items so that all of the different posts that we're going to be showing at some point in time especially if we're loading them from a database or something like that can appear and can be rendered efficiently so that's what we're going to be doing we're going to be talking about list view this is going to get a little bit complicated i know i've said that this is a beginner tutorial series but what i mean by that is beginner in terms of the flutter framework as i've been saying i do recommend or kind of hope that you guys have some programming knowledge so i don't have to explain absolutely everything but let's just think about what modifications i'm going to need to make here to actually start setting this up so essentially what i want is i want there to be a bunch of posts every single time you type a message and what is a post gonna can gonna consist of well i want to post to have some kind of body text or main text and then i want to have an author and a number of likes so you can like the post you can unlike the post it's by a certain author and then maybe in the future we'll make it so that if you click into a post you can comment on it or view a photo or something like that we'll see what we can add to this so a post is going to consist of an author a body and the number of likes now a post also has to know whether the user has liked it or has not liked it right if you think about like an instagram post or something like that if you press the like button it shows that you've liked it and if you like it again it unlikes it right so that's what we're gonna have to do for this post system so in order to kind of create some data structure to hold all of our posts and all that information i'm just going to make a new class called post so this is a regular class this isn't going to be a widget or anything like that it's just going to be your standard vanilla class and i'm going to say class post now what i'm going to do is i'm going to set up my attribute so i'm going to say string if we can type this here we're going to say string and what do we want we want that to be the body semicolon and then we will have a string which will be the author like that and finally we will have an int i guess that will be the likes and then we will have a boolean which will say if the user has liked this post okay awesome so we have that and we're going to set this to false by default so just say that's equal to false and i think there's no capital on that there we go and now we'll make a constructor and i'm just going to say post and it is mandatory that when you make a post you pass it the body and the author so we're going to say this oops this dot body and this dot author like that okay awesome so what this is going to do is essentially say oops let's not put those inside of curly braces then this needs to be dispositional arguments whenever we make a new post we must pass it a body and a author this will automatically assign the author to be equal to whatever we passed in and the body to be equal to whatever we passed in we're going to set the likes default 0 and we're going to set the fact that the user has liked this equal to false by default because we know that if we just made this post it has no likes and the user has not liked it then we're going to add a method that is going to be run whenever the user likes this post so it will add one to the likes of this post or subtract one based on if the user has already clicked it or not so let's just add a void here we'll say void you know like post or something like that and all we're going to do inside of here is say if oops actually we're going to change this we're going to say this dot user liked equals not which is this exclamation point this dot user liked so this will simply reverse whatever this is so if user liked is false and then we call this it will become true if it's true we call this it will become false now we're going to say okay so if this dot user liked so if that is true if the user did like it then let's add one to the amount of likes so let's say this dot likes plus equals one and we need a semicolon and then otherwise so if they didn't like it then we'll say or if they unliked it this dot likes minus equals one so essentially this is just saying if you press it and it was already pressed subtract one like if you press it and it wasn't pressed add one like and then that way you can just kind of spam it on and off and it will update one like go away one like you know you get the point it's gonna go zero one zero one zero one and now we have our post class so what i need to do now is i need to figure out okay where am i gonna draw this list view and how am i gonna keep track of all of these posts well right now what we have is that when we make a new post or we hit the message and we submit some text it goes to this callback method which is change text what change text does is simply change the text that's showing up on the screen now that's not exactly what i want to happen in fact what i want to happen is i actually want to store a list of all of the posts and i want to take this text that the user wrote inside of that field and i want to make that into a post and store that somewhere so what i'm going to need to do here is i'm going to need to actually make a list up here so we're going to get rid of all this text related stuff so including this text widget here first of all so text we get rid of this.text and i'll change the name of this after but let's make a attribute up here we're just going to say actually i don't even think this needs to be final i think i can just say list in angle brackets post and we'll just call this i guess posts like that and we'll make that equal to an empty list so we're just going to start by having a list of posts we denoting that saying that this is a list it's going to store posts because that's what the angle brackets mean we call that post set it equal to an empty list and now instead of calling change text let's actually change this to new post so that it makes more sense so new post void new post takes some text and what we're going to do here now is make a new post and add it to the post list so we'll say posts dot add and then inside of here we're going to say new post like that and we need a body and an author so for the body that's going to be the text and we don't yet have a notion of an author so i'm just going to leave this as tim for right now so all of our authors will be called tim um doesn't matter for right now we'll just leave it like that but we will probably end up changing this later now we need to change this callback method when we're passing that to body so instead of or not body sorry to text input widget instead of this dot change text i'm going to call this this dot new post right so now we will actually be modifying this list and adding the text to this list whenever a new post is created so that's the basics and that's how we kind of get that set up here and now we need to actually make a list view that will be able to display all of these posts and we're going to have to obviously put that inside of the body so we're going to make a new widget that will be our post list so what we're going to do for that is we're going to make a stateful widget so we're going to say i guess stf and there you go stfl that's going to be statefulwidget we're just going to call this post list like that's pretty basic and now let's just start rendering this list just so we can see how this works so let's go inside of body we can see we have a column and now i let me just make sure that this is the right render i don't want to mess it up for us so let's see how i'm actually deciding to render this uh yep so we'll leave that as column and then after text input widget we're going to put our post list so we'll say post list like that and just make a empty set of brackets now what i'm going to do is i'm actually going to put an expanded widget um that contains all of this so we'll say expanded like that and we'll say child colon explain what that does after i just add the second one here and let's say expanded child colon and we need to scroll over okay let's go and add another bracket oops add another bracket like that okay so now we can actually see this what the expanded does is essentially just make sure that everything that we have as the child actually fills an entire area so right now the post list we're not rendering anything it doesn't have a set size so we want to make sure that this fills as large of a space as possible and same thing with this text input widget so this text input widget does have some kind of size but by wrapping both of these in expanded this means we're going to take up the entire screen so we should have the text input widget first and then the post after but i actually would rather have the list up top and the text input widget at the bottom so i'm just going to reverse the order of these and put this at the top so we'll get rid of the comma there and now we have that so now we should have our post list and the text input widget so let's do a hot reload here and let's just have a look and see what we're getting okay so there we go so we have the list right or whatever is up here and then we have the text input widget now obviously things aren't looking perfect right now this isn't at the very bottom of the screen we'll get there in a second once we once we change what's actually being rendered inside of the text input widget or sorry the post list widget not text input widget but again the expanded just takes whatever child is here and just expands its size so it feels as large as it can so if you ever run into problems where you're seeing like stuff that just isn't taking up the entire screen or you have something that's saying oh this item doesn't have a size you can just wrap it in expanded and that will automatically hopefully fix that for you so you can actually read here it says creates a widget that expands a child of a row column or flex so the child fills the available space along the flex widget's main axis that's the more formal definition of what that does okay so now we're going to go inside of post list state we have post lists up here we start making some modifications so the first thing that we're going to need to do here is we're going to need to actually create a list inside of here that's going to store all of the list items so just like we're going to have all of the items that we're going to be displaying where is it inside of my home page state so inside of this list post we need to store them inside of post list as well because we need to know what items we're actually going to be displaying so inside of here what i'm going to do is i'm going to say final list like that and we're going to say post and then we're going to say list oops like that list items will be our name so we have final post list items now we're going to add our constructor so we'll say post list and inside of here we'll simply say this dot oops list items so the idea is that this post list will simply take a bunch of posts and it will display them for us so that means that we need to pass our post list here a list of posts to display so what we can do is we can simply give it the current posts that are here so it'll say this dot post and now whenever we have the text input widget and it adds a new post it will modify this post here by setting the state so we're saying this dot set state post dot add so we're adding a new post which is saying hey we're changing the state of this widget and then that will automatically update this post list widget right here and we'll send it the new post list that it can display so that's the idea behind this and we'll see how all this is going to work but that that's the basics essentially okay so we have all that we have the list items here we have post list items i don't think i need to do anything more in there and now what we're going to do is we're going to actually start rendering the widget now i might be looking to the left hand side of my screen here because i have the code up it's actually fairly complicated to make this list view so i don't want to mess this up so i will be referencing that as we go so what we're going to do here is we're going to actually render a listview so we're going to say list view and then we're actually going to say dot builder so the list view widget itself actually has four different ways that you can use it now i'm not familiar with a bunch of the other ways they're all really specific you can go to the flutter website and look them up but this listview.builder essentially allows us to define a way to construct items so we pick how many items are in the list and we say okay this is the function that we want to call whenever a new item is added to this list and what that function will do is actually generate what one item in the list will look like so you're going to see how that works as we start going through it but we're just defining a function inside of this listview.builder that will build each individual list item the reason for this in terms of a flutter back end is that we don't want to render every single widget all the time we only want to render widgets that are visible so if we simply have a function that can just take some list item and render it then we don't need to display every single list item at once we can just call that function on the items that are visible and display those specific ones at least i think that's the logic behind this but we'll go through and we'll see how this works so the first thing we need to do is we need to say item count is equal to and we're going to say this dot widget because we're going to reference this stateful widget up top and we're going to say dot i believe it's list items.length so this is just defining how long this or this list view is how many items are inside of it well how many items are going to be inside of it the amount of items we have inside of our list items um list right so that's what that is going to be in there and then we say item builder and what we do here is we define a function that will tell us how we build each individual item so what we're going to do is we're going to say context and then index like that and then we'll put two squiggly brackets like that and this denotes a function so essentially what this is saying is that we have a context we have some index and then inside of here we can use this index to display specific items so the first thing i'm going to do is i'm going to say var post is equal to and in this case this dot widget dot list items and we're going to index the index so the way this will work is essentially we're telling the list view that hey you're gonna have you know eight items you're gonna have five items or how many items are inside of this uh list items widget or not widget this list items variable that we defined up here that's how many items we know we're gonna have so we're kind of defining like okay we're going to have 5 4 whatever it is now listview knows okay you're going to have four items so this index is going to have to rotate from 0 to 3. it's going to go 0 1 2 3. so iterate from 0 to 3 because it needs to render all of those items so here what i'm going to do is i'm going to grab each item that i want to render from wherever it is that i want to render it so in this case i want to grab the post that has the index of whatever index is being put into this function here to build the item so i hope that's making sense but you have the number of items in the list