Flutter Tutorial for Beginners #17 - Lists of Data

Key Takeaways

all right gang so I want to move on now and talk about something else in flutter and that's how to cycle through lists of data and output that list of data in a widget dynamically so to do this I've created a new project a new blank project because what I want to do doesn't really fit with that ninja id-card project we were creating so I've created a new project and I've called this quotes and what I've done is deleted a lot of the bump that comes along for the ride when you create a new project on the boilerplate code and I've also deleted my app from inside run app as well now what I'm also going to do is remove the test folder because we don't need this anymore and the reason they keep deleting this by the way is because if I don't if we take a look inside here it references my up and it's just gonna cause a squiggly line and an error so I just like to get rid of that so we don't get that error so let me delete it like so okay so now what we need to do in here is build up this new application and it's going to start with a material app like we always do and inside this we need a home property now remember we need to make a widget now which is going to be instantiated here so that the home screen is going to be represented by the widget tree inside that widget now this is going to be a stateful widget because we need some changing data inside this widget we're going to have a list of data we cycle through ultimately and it's going to output to the screen so data could be changing here in there so let me now create a stateful widget so st fu l and tap and we're going to call this quote list okay so now we have our stateful widget class over here called quote list and it's associated a state object with it right here in this function which is down here and remember we have to build function inside the state object and this is where we return the widget tree so let's just reference this quote list stateful widget right here by saying quote list and now if we save this and play this then we should see a preview of this over in the device preview ok then so we have this preview now which is just a screen of doom at the met hit so let's build this up into something more interesting I'm gonna remove the container right here and I'm gonna replace that with a scaffold widget instead let me just get rid of that okay so inside this scaffold widget we're gonna have an app bar but before we do that let me give this a different background color and this is gonna be a gray color but a light gray this time so I'll say gray and then 200 it's more of an off-white so if I save that now we should get that gray color okay now we'll do an up bar and this is going to be an app bar widget you should be used to doing all this by now because we've done it in three different projects I think so far so let's now open this up and do a title which will be a text widget and the text will be awesome quotes okay so after the title we also want to censor the title so let's pop in that property and set it to true and then finally let's give this a background color and set it to colors dots red accents will go with that okay so if we save this now we should see this at the top this up bar and now we can add in the body of the app so let's put a comment after app bar and come down and say body this time and the body this time is gonna be a column because we're going to basically cycle through some data later on and we're going to output a separate little widget in a column for each bit of data so let's do this column and right here we need a children property which is a list of widgets right it's just a list now before we start outputting anything let's create this data so what I'm going to do inside this state object because that's where we define the data remember is create a list now the type of data I want in the list are going to be strings so let's do our angle brackets and say string and then we need to give this a name this variable so I'm going to call it quotes and set it equal to a new list now inside here I'm just going to do a lot of different strings well three strings to be exact so three quotes and instead of me type them out and you watch I'm just going to copy them from my repo and paste them right here so three quotes bonus points if you know who these quotes are by and what we're going to do now is cycle through these quotes and we're going to output a text widget for each one so how are we going to do this how we're going to output each of these quotes well there's a few different ways we could do this we could just hard code them but if we were to hard code them by actually writing the widget for each one then we're just hard coding the data and fair enough there's only three a minute but in the future there might be 10 and in that case we'd have to hard code 10 text widgets in the future there might be 50 and we'd have to hard code 50 texts which hits and that's not always the best way to do it so that's one option anyway another option is to use a list view widget built into flutter and we're going to learn about that later but the way I'm going to show you is to use the map function to map through our list of data and to output a small template or a small widget for each one okay so how does this work exactly well instead of defining our list right here what I'm going to do instead is say okay well take the quotes right here which we have and then use the map function on the quotes now what does the map function do it's pretty similar to the map function in JavaScript it cycles through a list of data so it's going to cycle through this list of data and for each item in that list it's going to perform a function and then we can return a value for each one of those functions so let me just explain this as I type it what I'm going to do is create a function right here and this function is going to execute for each item in this list and we get access to that item and we can pass it in here as a parameter so we can call it a or Q for quotes I'm just going to call it quotes like that so every time we cycle through a different item inside this list we get access inside this function to that quote okay so what we could do is we could say okay well that quote I want to take it and output it so I'm going to return right here a text widget and in that quote so what we're now doing is saying okay well cycle through this and perform a function for each item and for each item take that quote that string and return a text widget and that's returning that into this iterable quotes dot map returns an iterable so what we need to do is actually return a list because remember the children property expects a list so if we say at the end of this dots two lists which is a method we can use to turn it into a list then now we have a list of text widgets and each text widget is taken in the quote each time around it cycles okay so this should work now if we save this and preview over here we can see we're taking each quotes as we go through it and we're outputting it to the screen so that's working awesome now this is absolutely fine but remember we can use an arrow function if we're just returning a single value here on one line so what we could do is just remove this return keyword and we can move this up here we don't need the curly braces anymore either so we can take those away and what we can do is just do an arrow from the parentheses and then that's going to return text with the quote inside that widget and then we're turning this to a list at the end of it so that's all we're doing here we're mapping through a list of quotes we're taking the quote for each function or for the function that fires for each item in the list rather and then for each item in the list we're returning a text widget and the text of that widget is going to be that quote that we're currently cycling through eventually this returns an iterable which should not be the value of the children we need a list so we take that iterable and we use the two list method and that turns it into a list of text widgets okay so if I save this now it's still going to do exactly the same it still outputs all of those different quotes now it may be that each quote also has an author associated with it so each bit of data over here in the list is going to have to be a little bit more complex and we're going to look at how to combat that in the next do