All language subtitles for 019 Adding Border Style_en

In the last section, we applied some marchin around the edge of our container widget, now that we've

got some margin on there, we're also going to make sure that we get some padding as well.

Remember, padding is the spacing that shows up inside at the border.

But between the border and the actual widget that gets shown inside the container, it's all the padding

does is making sure is make sure that there's some kind of standoff between the interior widget and

the border itself.

Otherwise, the border would touch everything inside of the container and it definitely wouldn't look

that nice.

So to add in some padding, we can go back to our container class.

I will again find my constructor function right here.

And you'll notice that just like we have a margin that accepts some edge in thing, we can also provide

a padding property as well.

So to add some padding into our container, I'll find my container widget right here.

I'm going to add in a name, property of padding, and I will also give it an identical edge in sets.

So I'll say edge insets.

I want to add some padding on all sides of this container.

So I'm going to use the all constructor and I'm going to give it a double of twenty, which again indicates

that we want to have 20 pixels of spacing.

OK, so we could definitely test this out inside the emulator, but I'm sure it's going to work just

fine.

If we tested it right now, it would really just look like there was additional padding or some additional

margin around the container.

The padding is not really going to be relevant until we actually get a border around this thing as well,

because that border is going to give us some visual distinction between the padding spacing and the

margin spacing.

So let's start working on the border right now.

So to add in the border, it's going to be just a little bit more complicated, not in terms of like

theory or anything like that, the border is just more complicated because it's a bunch more of these

like fancy class names you have to look out the documentation for, that's all.

So to actually apply a border to the container.

You'll notice that there's not any like border property inside of here to get a border on the container.

We make use of this decoration property right here.

The decoration property is used to apply some type of styling to our container.

So that might take the form of a border.

It might take the form of maybe some background color.

To get a border show up, we need to assign something to this decoration property and it has to be of

type decoration.

So we'll go look at the documentation for decoration right here.

Now, when we look at the decoration class, we can scroll down to the constructor, as usual, but

you'll notice that it says right here, abstract const constructor.

We'll talk a little bit more about what a abstract constructor is later on.

But right now, all we really need to understand is that we don't use this decoration class directly

instead to apply some decoration to a container.

We instead use this box decoration thing that's listed right here.

If you don't see the link for that, we can always do a search for box decoration as well.

OK, so the box decoration class, again, let's go look at our constructor.

Here's the constructor so we can assign to this thing a color, a image, presumably a background image,

we can get some shadow on there, all this different stuff.

But most importantly, we can assign a border property and you'll notice that even this border property

right here is its own like separate object.

So this is what I meant when I said doing the border was a little bit more complicated.

It's not like theoretically more complicated.

It's just this kind of vague mix or this big jumble of different classes that you have to be aware of.

I know that right now you're probably looking at all these classes I'm clicking through and thinking

like, how in the world am I ever going to remember this?

Honestly, don't worry.

As long as you've got one code snippet to reference, which is what we're doing right now, you're going

to apply the same thing every time to apply a border to an object.

So I know this jumble of classes looks nasty, but you just see the code one time and then you go back

and reference that code again.

In the future.

We need a border.

That's it.

So let's let's kind of cut to the chase here.

We know that our container.

Is going to take a decoration property and the decoration must be a box decoration class.

Then to the box declaration, we can provide a border property and now the last piece we haven't quite

spoken about is how we actually get a border created.

So again, unfortunately, we can't just say like one pixelate grey or something like that.

We have to actually provide a widget right here.

So to get a border, we're going to do border dot all.

Now, that dot.

All right.

Here is the exact same thing as EJ INSETs.

All all means that we want to apply a border on all sides of this thing.

So on all sides, I want to apply an equal border.

And then to this all constructor function, we're going to pass the color of the border that we want

to use so we can pass in a color and then to specify the color again, unfortunately, we don't just

say like gray or something.

We actually have to specify a distinct color.

So I'm going to say colors, which is a reference to an object that has a bunch of color codes assigned

to it.

And I'm going to pick out arbitrarily the color gray like so.

All right, so I know I just went through this code right here kind of quickly, but again, my point

here is that you don't have to memorize all this stuff when you need to do a border.

Just come back and look at the sample code.

Honestly, I don't know many people who are going to memorize every little character in here.

Everyone is probably going to reference back on their notes or previous project and say, oh, yeah,

that's how I do border.

That's how I apply a border to a container.

OK, so enough of that, let's save this thing, I'm going to make sure I get a comma at the end of

this line so my code doesn't collapse and it will flip back over and test this out.

Now, as usual, I know I got these longer appre start times.

I apologize for that.

It's because I'm recording video at the same time that I'm running an emulator and the compiler right

here and that played a lot of demand for the resources on my laptop unfortunately.

But it'll be just a second or two.

There we go.

So now we can add an image.

And we get our nice looking border around the outside and now you can really see the difference between

the margin and the padding start to come into play.

So the margin is everything outside at the border.

We then have the border and then we've got the 20 pixels of spacing inside that represents the padding.

So now I can click again and again and all of our images start to appear awesome.

So I think the last thing we have to do is make sure that we also get our title around this thing as

well.

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