All language subtitles for 015 Building Lists with ListView_en

In the last section, we marked our images instance variable on the image list widget as final, which

indicates that you and I do not plan to change that thing at any point in time.

So now that we've got the image list in a somewhat good state right here, it's time to actually add

a build method to this thing that's going to look at our list of images right here and show one widget

on the screen for each individual image.

Let's first very quickly look at some documentation for a widget that we're going to use to render out

that list of images.

So back inside my browser, I'm back at Dock Street, Flutter EOH, and on the top right hand side,

I'm going to search for List View and I'm looking for the list view class.

Eliscu class is very heavily used inside a flutter, so any time you're going to make a list of elements,

chances are you're going to end up using the list view class.

As such, the list of you class has a lot of very strong documentation in it.

So if you want to, you could certainly take a glance at all the documentation in here.

But for you and me, we're going to find that constructor section as we usually do.

OK, so here's constructor's, you'll notice that there is a default constructor right here of List

View and there's also a named constructor of Dot Builder.

There's a quick text description on both these.

If we use the list view constructor directly, then we are going to take a list of records and try to

build a single widget out of each one.

And we're going to create that entire array of widgets instantly.

So the instant our entire application renders to the screen of our device, we're going to build out

the whole list of every single element inside of our list view.

So this is sometimes not the best approach from a performance perspective.

Think about it.

If we have a list of like 5000 images, we don't want to build out five thousand widgets the instant

our application loads up.

So very frequently, we instead use this builder named Constructor.

The list viewport builder constructor creates alerts me if works just a little bit differently and that

it creates a list of widgets that are created on demand.

The term OnDemand here means to say that as a user is scrolling around this list of records on their

mobile device.

Only when the user starts to reach the end of that list will this list of builder start to kick in and

render more widgets to go on the screen.

So we can think of List View Builder as being a little bit more lazy in nature, whereas the list view

constructor is much more eager in nature and tries to build a list as soon as possible.

Of the time, we're going to want to use this builder constructor because it's much stronger from a

performance perspective.

So all that leaves is, hey, how do we actually use this thing?

Well, let's flip back over to our image list widget and we'll define our build method in here and get

a better idea of how to use that builder.

So I'm going to define my build method.

It's going to return something of type widget and it's going to be called with that context argument

that we've not yet discussed quite so much.

And we're going to get around to that at some point in time.

Then inside of here, we're going to return list view dot builder.

We're going to provide two separate arguments to this thing.

The first argument is going to be a named property of item count.

So item count is going to tell the list for you how many different widgets we're going to want to render

on the screen.

In our case, we probably want to render a number of widgets equal to the number of records that we

have inside of our images list.

So to tell the list, view how many records we have, I'm going to say images at length like so this

is how many widgets are going to want our list for you to create.

Then as a second argument or the second name property, I should say, we're going to ride a Eitam builder,

the item builder is a function.

This function right here is going to be called with a context.

Oops.

Context and a second argument, that is an integer called index, so let me tell you about how this

item builder function works as a user starts to scroll around on the device.

The item builder function right here is going to be called the list for you expects that you and I are

going to put some logic inside this function to construct a new widget.

That is going to represent every item inside of our list of images or whatever we're trying to represent

on the screen.

The first argument to the function is context is the same type of context that it's given to our build

function right now, again, not relevant for what we're doing right now.

It will be relevant later on.

The second argument right here is much more important.

This is the index of the element that the list is trying to render on the screen.

So for you and me, when our item builder first gets called to show our list of widgets on the screen,

we're going to get an index of zero, which indicates to us that the list builder is trying to render

the first element on the screen, like Index zero first element.

So we're going to look into our images list right here.

We're going to pull out the very first image, first image model instance or whatever, instead is inside

of their index of zero.

And then we're going to build and return a widget inside of here that represents that first image inside

of our images list.

Now, that's all a kind of complicated verbal description.

So let's take a quick pause right here.

We'll come back to the next section and start adding some code to our item builder function.

So I'll see you in just a minute.