All language subtitles for 020 Column Widgets for Layout_en

In the last section, we added in a border that is displayed around our child of the network image.

It's the last thing we have to really do here is make sure that underneath the network image, we see

the title of the given image.

Now, before we dive in on doing exactly that, there's one thing I want to point out about our current

item builder right here.

The item builder is definitely starting to grow in size.

There's a lot of very nested code inside of here.

And even as you've been following along in the last couple of videos, you might have made some accidental

typo, you know, left out a comma or something inside of here, all because this heavily nested code

is kind of tough to read.

So I think that rather than continuing to stack up more of this widget logic directly inside of our

item builder function, we should extract some of this to a helper method defined on our image list

class.

So let's try doing that right now.

Underneath my build method, I'm going to create a new method that I'm just going to arbitrarily call

build image, totally making that name up the name build right here.

This is a very importantly named method.

We have to have a method called build on all of our state lists and stateful widgets.

This thing gets called automatically to determine what this widget is supposed to be showing on the

screen.

But the name of build image right here, not special.

I just made it up off the top of my head.

When we call build image, we're going to expect to construct a container where some type of widget,

so I'm going to mark the return type of build image as being widget.

And then when we call build image, presumably we're going to call this one time every time the item

builder runs, so I'm going to assume that we're going to pass in the image model that we're trying

to construct a widget for.

So I'm going to say we're going to receive an image model instance that we'll just call image.

So now inside my item builder.

I'm going to find my container.

And I'm going to find the closing parentheses for the container right there, please, please double

check, make sure you've got the correct closing parentheses and then going to cut all that.

Inside of my building, which I'm going to return.

That container like so.

Then inside the item builder function, I'm going to make sure that I call build image.

And I'm going to pass in images at index like so.

So now we are passing in a single image to the build image method.

And then the last thing we have to do inside of build image, we still have that logic right here that's

trying to look at our list of images.

We don't want to do that anymore.

We now want to reference the image that is being passed into this method.

So I'm going to replace all that with image that you URL like, so.

But I'll save the file.

And I'm going to make sure that I don't see any errors inside of here.

I think it looks good to me.

So now, by extracting all that logic out of our item builder, the item builder is much easier to read,

far more straightforward.

And we now have a single build image method that is responsible for just showing one single image by

itself.

OK, so good improvement, but we're still not done yet when we call build image, we're trying to show

the entire widget that shows that image with the title underneath it.

So essentially, this thing right here.

Right.

So at this point, we've got the image showing up, we've got the border, but now we need to get the

title in there as well.

So right underneath the image, I want to see the title appear.

Well, if we flip back over here, we're currently showing the container and we had said that to show

something inside the container, we assign it to the containers child property.

But if you look at child right here, well, that definitely sounds like a single widget.

So when we show a container, it expects to receive a single widget that is going to be displayed inside

of it.

But we're now saying that we want to show both the image and the image title.

So to get both those in there, we're going to wrap the image right here and the text widget that we

need to create with another kind of layout widget.

Let's look at some documentation really quickly, and I think you'll kind of get a better idea of what

I'm talking about.

So I'm going to pull up the widget catalog, remember, this is at Fledermaus Widgets and then inside

of here I'm going to find the section named Layout right here.

OK, here we go.

So at the very top, you'll notice that we have some called single child layout widgets.

So just as you would expect, this means that there is exactly one child allowed to be placed inside

of each of these.

We just made use of the container.

We could also made use of padding center and maybe a couple others inside of here.

So all these will only take a single widget and show one widget inside of it.

So we need something that can contain multiple widgets together if we scroll down a little bit more.

We'll find a section marked as multiuse child labor widgets, so this is what you and I really want,

we want to try to show multiple widgets together.

In particular, we want to make sure that ours are showing kind of one on top of each other, so laid

out in a sort of column.

And as you might guess, that's the exact purpose of this column, which is right here.

So we can create a column widget that's going to take a list of childs and it's going to try to show

each of those children in a vertical fashion inside of it.

Now, if you want to, you could definitely look up the documentation on this.

So it's going to take a list of children and show them all inside of it, and we could certainly look

at the documentation right here.

So we're going to create a column widget.

We're going to provide a children property and then pass in a list of all the different widgets that

we want to show in the column.

Now, I think I've repeated that phrase like four times the last couple of seconds.

So I think you get the idea of where we're going here.

Let's go down to the constructor.

Yeah, we make a column.

We pass in our children as a list of widgets.

That's pretty much it.

So let's just do that right now.

So rather than showing a single child of the network image, I'm going to remove the network image and

I will replace it with a column.

Now, we are not breaking the rules here.

The container expects to receive one single child, and that's what we're passing to it now.

We're passing a single column widget, but the column itself can contain multiple children inside of

it.

So that's how we're going to show multiple children inside of a so-called single child widget.

So on the column, I'm going to add a children's prop., this is going to be a list, a list of widgets.

Just to kind of annotate this thing correctly, I'm going to add on and say this is not list, but widget

like so so that just means to say that we are creating a literal list that is going to contain nothing

but widget type elements with most of the as with most of these type requirements, we don't actually

have to like mark the thing as being of type widget or containing widgets.

But, you know, it's a nice thing to do.

So then inside of here, we can show our image and we'll write that again, it's image dot, network

image, dot URL.

And then second thing we're going to pass in here is a text widget that's going to display the title

Property of our image model.

Don't forget our image model.

Here it is right here.

It has that title property.

So I'll make my text widget and inside there also image dot title and I'll make sure I get a comma at

the end so that this line does not collapse.

OK, so let's save that and we will do our refresh and see how we're doing.

Now, before we actually look at this on the screen, there's one quick thing I want to mention here.

Notice how we are showing this list of children inside the column.

So at present, we're going to show the image and the text right underneath it.

But we don't have anything inside of here right now to provide any type of spacing between our text

in the image.

So I kind of expect that we might see the text in the image, kind of like sandwiched up against each

other a little bit too closely.

But we'll see what happens.

All right.

I'm going to make sure that my reload kicked in.

It did.

So I'll add in a couple of images here, and I see fantastic, I get the title on there and as I add

each additional image, I see the title appear.

Awesome.

OK, so that definitely is good, but like I just mentioned, that title is really sandwiched up against

the thing.

So I would like to put in just a little bit of margin or kind of padding on the top of that text just

to separate the two a little bit.

So let's take a quick pause and we'll take care of that in the next section.