All language subtitles for 021 Selective Padding_en

In the last section, we got our title to appear underneath the image, but the title is just a little

bit too close there.

So I want to add on just a little bit of padding now.

When I say padding, you might immediately think of using another container element, wrapping our text

or the image with it, and then using the containers, padding property to add a little bit of spacing

in.

And that's definitely an option.

But very quickly, I want to show you something in the documentation.

So I'm going to go back to the Layout Widgets page.

Again, this is at Flitter Widgets Layout.

So inside of here, we just saw those single child layout widgets.

We made use of container right here.

But you'll notice that there's another.

Which are right here called padding, so the sole purpose of this padding widget is to add a little

bit of spacing around some child widget, which is essentially exactly what you and I need to do now

before you run off thinking like, OK, yeah, padding is perfect here.

Well, you might notice that adding some spacing around an element is kind of exactly what the container

was doing for us anyways.

So you'll notice that these two widgets are kind of doing the exact same thing.

Well, in fact, if you look at the documentation for padding.

You can scroll down a little bit, and right here you'll see a big section about what the difference

is between a padding widget and a container with some padding property.

So if you want to, you could definitely read this thing right here, get a better idea of what's going

on just to get a little bit of variety.

We're going to use a padding widget because that definitely kind of suits the goal of what you and I

are trying to do right now anyways.

So to use this padding widget, we can create a new padding widget we pass in a child to display inside

this thing.

And then we're also going to give it a padding prop., which, again, is going to be another one of

those etch in sets thing.

So back inside of my editor, I'm going to wrap my image right here with that padding widget we were

just looking at.

So this is going to involve a little bit of heavy duty refactoring.

I want you to make sure that you don't accidentally, like, remove any commas or anything like that

that should not be missing.

So let's just follow me for a little bit here.

So we're going to add in a new padding.

I'm going to give this thing a child property, and then here's the part where the refactor is going

to get a little bit nasty.

I'm going to take my network image, the entire line right there.

I'm going to cut it and I'm going to assign it to child like so.

Then I'll put a comma after padding, so now padding has a child of the network image, and then we

also need to specify that padding property as well.

Do pouting and just like before, we're probably going to want a insets.

Now, before we use EJ INSETs all, we supplied some padding around all sides of that element, but

this time we probably don't want to add additional padding on all sides of this image.

We probably only want to have some padding at the very bottom.

So there's another named constructor that's a part of INSETs right here.

We can provide the only constructor.

So this means to say that we want to add some padding only on some given sides of this element.

So when we use this only constructor, rather than passing it just a double right here, we can actually

we can just hover over this thing and they'll tell us very simply so we can pass in some name parameters

to specify which sites we want to add this padding to.

Now we can add padding to all four sides or just one or two or three or however many want.

So for us, we want to add some padding just on the bottom edge.

So I'm going to add in a named parameter.

Of bottom, and I'll give it, actually.

How about just like eight and remember, eight right here is a double, so it gets the decimal.

Now, we could definitely put the comma on here and leave the line expanded or we can remove the comma

and let it collapse like so it's totally up to you.

But I think we're ready to do a test here, so I'm going to refresh.

And as usual, we got that like 20 second wait, I'm so sorry, so sorry, I know these pauses are awful,

but it's like just long enough where I don't want to stop the video.

I guess there's the restart.

I like my plus.

And now we've got just a little bit more padding there on the bottom eight pixels worth, is it enough?

I don't know.

It probably is.

If you want to, you could definitely add on some more padding there, but I think it's enough for me

to be happy with.

OK, so that's pretty much it.

That is our application.

We've got our list of images being displayed.

We've got a little board around each one.

We got the text, I think recompletion.

So let's take a quick pause right here.

We're going to come back to the next section and we'll do a quick review on some of the big highlights

of the project that we just finished up.

So quick break and I'll see you in just a minute.