All language subtitles for 012 Building Lists of Widgets_en

Our app states, which it is now storing every single image inside this images list right here, so

we're now going to figure out how we can build a list of widgets out of all the records that we're storing

into our images list.

Again, this is going to be an exercise in basic list building.

And this is something that we're going to have to do in every application out there that builds a list

at some point in time.

And it turns out that's probably the vast majority of apps.

So we're going to be building lists several times throughout this course.

And right now will be the first taste that we'll get of it.

Now, our app state, which it right now has a pretty good amount of code inside of it, and we're getting

up to 40 lines, I personally like to keep these widgets as small and compact as possible.

So although we could definitely add all this logic to create a list inside of our app state class right

here, I think it might make a little bit more sense to create a new separate widget class that's going

to take our list of images and render them out as a list on the screen.

So to how is this new class that we're going to put together?

I'm going to make another new directory inside of my SIRC folder inside of Sarsae.

I'll make a new folder called Widgets.

So the widgets directory right here over time might house all the different reusable widgets that I

will create inside of my application, inside of the widgets directory.

I'm going to make a new file and I'll call it.

How about image underscore list dot dart.

I think that's a reasonable name.

Then inside this file, we're going to first start off with that import statement that I'm going to

expect to see in just about every widget file I ever create.

It's all, say, import packets, flutter material darts.

Then right underneath that, we're almost definitely going to need to know some information about the

image model that we've created inside of our application, the image list, which it is supposed to

iterate over the list of all those images.

So this file is definitely going to need to know about exactly what a image model type is.

So we're going to import that file inside of here as well.

So let's say import and then this time to import that file, we're going have to write out a little

bit more complicated import statement.

So I need to go up one directory into the Sarsae folder, then into models and then get the image model

dot dart file to do so.

I'm going to write out dot, dot, slash.

So that goes up one directory into SIRC.

Then I'm going to go into the models folder and then get the image model darte file Lexar.

Ko.

OK, so now we'll create the actual image list, which it is also a class image list extends and then,

oh, a little bit of hesitation there.

I want to think for a second, are we making a stateless widget or a state full widget?

Well, let's go back and look at our diagram one more time to remind ourselves if I can find it.

Here we go.

So my question to you is whether or not you think this new widget that we're going to create is going

to have any instance variables that are going to change.

Is it going to have any instance variables that are going to be changed by the widget itself?

That's definitely a very tricky question.

The image list that we are creating is going to be given a list of image model instances and we're going

to have to definitely somehow like save that list of images inside this widget so that we can refer

back to that list later on when our build method gets called or whatever else we're trying to do.

So I think that we are going to have to know about that list of images inside this widget.

And I think that without a doubt, that list of images will change over time because we're going to

be adding on no new images every time the user presses that button.

However, this is the key part.

However, it is the parent widget of the app state that is changing that data.

So our image lists right here.

It is going to have an instance variable.

I kind of will expect that to change over time.

But it's not the image list job to change it.

So because the image list right here is not changing that variable, because it is not in charge of

maintaining that list of images, we're going to make this a stateless widget.

The image list is never going to try to change that list of images and it's never going to try to render

itself.

And so it's a prime candidate to be a stateless widget.

OK, so then inside of here, we're going to eventually build out our list.

First, let's take a quick break and we'll come back to the next section and take a look at some documentation

on how we can build a list.

So I'll see you in just a minute.