All language subtitles for 018 Containers for Positioning_en

In the last section, we got our images to show up on the screen, but they're taking up the entire

width of the screen and it's kind of hard to see any multiple number of images at the same time.

If we look back on our mockup over here, we definitely reflected like kind of a border right here.

That's definitely a border.

We showed the image and then the title of the image right underneath it.

Now, there's some fine details in here that I want to point out.

You'll notice that with the border that we're displaying, there's definitely a little bit of spacing

between that border and the actual edge of the devices screen.

In addition, you'll also notice that the image title is not like sitting directly on that border,

right?

It's not like sitting directly on it.

Instead, there's a little bit of spacing between the border and the actual image title.

So I think that we need to learn a little bit more about how to create a border and get some spacing

to the left in the right of the item and some spacing between everything inside of this border as well.

So to get started, I'm going to pull up some documentation again.

So again, at Doc's flutters, oh, I'm going to do a search for a widget called a container.

All right, so a container is exactly what it says right here.

Essentially, it's kind of like a convenience widget.

OK, I can do better than that.

It literally says convenience widget.

All right.

Let me try to get a container.

Class is a very common use widget.

We use it very frequently for positioning elements on the screen or adding any type of styling around

a set of widgets.

In our case, we're going to create a container class that's going to represent this kind of border

around here and inside of that container.

We're going to display our image and our image title as well.

So we need to figure out how to use that container to at least get, you know, the border on there

and also get some margin on the left and right hand sides and a little bit of spacing inside of it as

well.

So back at the container class, as usual, I'm going to take a look at the constructor function.

All right, here's our constructor's right here.

So inside of this container constructor, you'll notice that we have a padding and we also have a margin

right here.

So if you've ever done any amount of Web development or learned anything about CSFs, the words padding

and margin might look a little bit familiar.

Let's take a look at a diagram.

All right.

So in this diagram and I know it's kind of hard to understand what's going on here, but the kind of

blue box on the inside represents some widget that we might want to show inside of our container around

this container.

We get a couple of different spacing elements that we can use to kind of position everything that goes

inside the container.

Immediately outside of the container or outside of the kind of widgets that were going to render inside

of it, we get an area that we refer to as padding.

Padding represents some space that we can assign around our widget.

Right outside of the padding is another layer that we refer to as the border, and that's kind of like

the dark red line right here.

So the border goes all the way around and it's right outside the padding.

And then finally outside of the border is our margin.

So this follows the conventions of CSFs.

Exactly.

We've got our internal elements right outside that.

We've got some space allotted for our padding outside, that we have our border and then outside that

we've got our margin.

So it's kind of relate this back to what you and I are trying to achieve.

This space right here between the border and the screen of the device or the edge of the screen is going

to be our margin spacing.

Then the border itself is going to be, of course, the border.

And then inside the border, the space between our border and any element inside of our container is

going to represent the padding space.

All right, so I know these terms might seem a little bit strange, so let's flip back over to our editor

and start writing out a little bit of code.

So I'm going to find my item builder right here.

Right now, we're just showing Image Dot Network.

I'm going to you know, let's just take that out for a moment and we'll just focus on the container

for right now.

We're going to rewrite rewrite that line of code in just a moment.

So rather than returning the image directly, I'm going to instead return a container and we're going

to apply a bunch of styling and positioning to the container, I'm going to first try to add on some

margin.

Now, if you're again used to web development, you're probably used to defining margin as like, you

know, 20 pixels, 20 pixels or something like that, unfortunately, not quite so easy with flutter

instead to define any spacing like with marchin right here we have to use a class called Edge INSETs.

So this is a class right here that defines some spacing around an element, the term edge insets you

can kind of think of as meaning like spacing around the edge of this element.

The edge in INSETs class has a named constructor on it called all.

The all named constructor right here is referring to all sides of this container, so like the top,

the left, the right and the bottom as well.

So we are trying to define some margin that is going to be applied to all sides of this container element.

Then, as the only argument to this thing we have to pass in a double, remember, that's a number with

a decimal tied to it that represents the pixels of spacing that we want to have around the container.

So for us, I think something around like 20 pixels might work out and remember to define a double.

You have to put the point zero on here.

If you only do 20, you're going to get an error message because that's trying to create an integer.

So we're going to do twenty point eight.

OK, so just to test this out, let's try to get our image to show up inside the container now and we'll

verify that we got some margin around the image.

So to show an element inside of a container, we use the named property of child.

Remember, this child named property is very common, a ton of built in flutter widgets except a child

parameter right here, like the one you see.

And it's a widget that you want to have displayed inside of whatever you're trying to create.

So inside of our container, we want to show that network image that we had just created.

So I'm going to put Image Dot Network and we're going to look at images at index and I want to get the

Eurail off there.

Now, don't forget, at the end of this line, we want to put our comma there to make sure that when

we say the file, the entire thing doesn't collapse.

OK, so quick test.

I'm going to reload my app, so now every time we built a individual item for our list, we're going

to make a container that has some amount of margin assigned to it.

And inside the container is going to be our network image.

So I'll wait for my refresh.

All right, there we go and I'll click the button.

And now I still get the image, but you'll notice I've got what is supposedly about 20 pixels of space

on all sides of the image.

So top left, right.

And if I had another image, I'll see 20 on the bottom as well.

Now, there is even though it looks like there's a little bit more right here, there is still 20 pixels

of margin.

The reason this looks like there so much is that there's 20 pixels of margin on this image on the bottom

and there's 20 pixels of margin on the top of the purple one as well.

So this ends up being 40 pixels right here.

But this definitely looks a little bit better, so let's take a pause right here.

We'll come back to the next section and we will try adding on some padding and a border to that thing

as well.

So I'll see you in just a minute.