Original subtitles

To change the appearance of that and with that, I don't mean the date,

we'll take care about that separately

but to change the overall appearance, we have to learn a bit more about how styling in Flutter works.

We already did some basic styling,

we for example set a background color on that card

here at the top

but how could we style this a bit more?

For that you have to understand that styling in Flutter works entirely through the arguments you pass

to your widgets.

If you have a web development background, you are used to using CSS, Cascading Style Sheets for styling and

that is basically extra "programming language" in quotes, it's not really a programming language but doesn't

matter. It's an extra programming language which you can use to tell the browser how to style certain

elements on the page

and it's only loosely connected to HTML which is the structure of your page,

the programming language with which you describe which elements you have on the page. In Flutter,

there is no such separation,

you don't have a separate styling language or anything like that, you style widgets through the arguments

they take and you have a lot of flexibility there

and if a certain widget doesn't take a certain argument, if you can't give a column a background color

for example, indeed you can't, then you always have to use another widget and wrap the widget which you

want to style with it.

So for example, if you want to give that price here, that amount here let's say some spacing and a

background color, then we can't do this on the row or on the text but we can do that on the container.

We can add space around it with the help of margin because if you recall that slide I showed you earlier,

a container is basically a collection of things,

you have the child, the content in the middle,

then you have some internal spacing between the border and the child and some external spacing around

the item,

so around the border, so here we can add margin to add some spacing.

Margin is actually of type EdgeInsetsGeometry and you always create margin in Flutter by using

EdgeInsets. and then you have different ways of creating margin. Margin in all directions,

a constructor where you can specify the margin in each direction separately. Symmetric margins where

you say how much margin you want to have top and bottom and left to right

and that's indeed the margin I will use here.

There you say how much margin and that's now just a number, in pixels, you want to have vertically,

and let's say that's 10

and then how much margin you want to have horizontally and

let's say that's 15.

And if we do that and we save, we now see we have some spacing around that, just like that. You also

can of course do more, let's say we want to have a border. Conveniently, the container has a decoration argument.

Decoration here takes the decoration class but actually and that's something you learned from the docs

or from this course, you should use BoxDecoration here, instantiate that and now that is a class

which gives you a lot of crucial arguments to style the decoration and therefore the appearance of

that container. Not every widget has a decoration

argument, row for example doesn't have one but the container has.

So here for example, we could now also assign a border. Now a border again is not simply a number or anything

like that, here it's instead of type BoxBorder. So you could think that you need to type BoxBorder and

see what that gives you but actually, the general border object is what you want here and there, you have

some extra constructors and all is really useful because that allows you to define a border in all directions.

If you just create border as an object like this with the normal constructor, you can specify the border

for each side separately if you needed that. So Border.all allows us to draw a border around the container

in all directions and you can give that a color

and here I'll just use black,

you can give that a width, maybe two pixels and a style and here you could choose from different styles

like dotted and so on.

If I auto format this and save this,

now we see there is a border around our price. Now actually, some spacing inside of that border would

be nice too

and you learned that this could be done with padding, now not inside of the BoxDecoration but inside

of the container

and again if you're wondering how I know this, the IDE helped with control space and the official

docs and of course resources like this course are your way to memorize this and then it's always about

playing around with these things.

Padding, just like margin takes EdgeInsets objects,

so let's add EdgeInsets here and there I want to have the same padding in all directions, maybe 10.

So this is taking shape,

we now have a border with our amount in the middle,

maybe we now also want to change the text style

however.