Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,580 --> 00:00:05,450
To change the appearance of that and with that, I don't mean the date,
2
00:00:05,450 --> 00:00:07,270
we'll take care about that separately
3
00:00:07,410 --> 00:00:12,930
but to change the overall appearance, we have to learn a bit more about how styling in Flutter works.
4
00:00:12,960 --> 00:00:15,200
We already did some basic styling,
5
00:00:15,210 --> 00:00:18,000
we for example set a background color on that card
6
00:00:18,000 --> 00:00:19,060
here at the top
7
00:00:19,140 --> 00:00:21,230
but how could we style this a bit more?
8
00:00:21,390 --> 00:00:27,670
For that you have to understand that styling in Flutter works entirely through the arguments you pass
9
00:00:27,670 --> 00:00:29,010
to your widgets.
10
00:00:29,010 --> 00:00:35,070
If you have a web development background, you are used to using CSS, Cascading Style Sheets for styling and
11
00:00:35,330 --> 00:00:41,170
that is basically extra "programming language" in quotes, it's not really a programming language but doesn't
12
00:00:41,170 --> 00:00:48,330
matter. It's an extra programming language which you can use to tell the browser how to style certain
13
00:00:48,330 --> 00:00:49,610
elements on the page
14
00:00:49,860 --> 00:00:56,460
and it's only loosely connected to HTML which is the structure of your page,
15
00:00:56,470 --> 00:01:02,480
the programming language with which you describe which elements you have on the page. In Flutter,
16
00:01:02,490 --> 00:01:03,960
there is no such separation,
17
00:01:03,960 --> 00:01:09,780
you don't have a separate styling language or anything like that, you style widgets through the arguments
18
00:01:09,780 --> 00:01:12,770
they take and you have a lot of flexibility there
19
00:01:12,900 --> 00:01:18,120
and if a certain widget doesn't take a certain argument, if you can't give a column a background color
20
00:01:18,120 --> 00:01:24,210
for example, indeed you can't, then you always have to use another widget and wrap the widget which you
21
00:01:24,210 --> 00:01:26,160
want to style with it.
22
00:01:26,160 --> 00:01:32,730
So for example, if you want to give that price here, that amount here let's say some spacing and a
23
00:01:32,760 --> 00:01:42,110
background color, then we can't do this on the row or on the text but we can do that on the container.
24
00:01:42,110 --> 00:01:49,190
We can add space around it with the help of margin because if you recall that slide I showed you earlier,
25
00:01:50,110 --> 00:01:52,280
a container is basically a collection of things,
26
00:01:52,310 --> 00:01:54,470
you have the child, the content in the middle,
27
00:01:54,500 --> 00:02:00,050
then you have some internal spacing between the border and the child and some external spacing around
28
00:02:00,050 --> 00:02:01,310
the item,
29
00:02:01,310 --> 00:02:07,330
so around the border, so here we can add margin to add some spacing.
30
00:02:07,550 --> 00:02:15,860
Margin is actually of type EdgeInsetsGeometry and you always create margin in Flutter by using
31
00:02:15,940 --> 00:02:22,130
EdgeInsets. and then you have different ways of creating margin. Margin in all directions,
32
00:02:22,320 --> 00:02:28,100
a constructor where you can specify the margin in each direction separately. Symmetric margins where
33
00:02:28,100 --> 00:02:31,830
you say how much margin you want to have top and bottom and left to right
34
00:02:31,850 --> 00:02:34,130
and that's indeed the margin I will use here.
35
00:02:34,160 --> 00:02:39,290
There you say how much margin and that's now just a number, in pixels, you want to have vertically,
36
00:02:39,320 --> 00:02:40,610
and let's say that's 10
37
00:02:40,670 --> 00:02:43,270
and then how much margin you want to have horizontally and
38
00:02:43,270 --> 00:02:45,010
let's say that's 15.
39
00:02:45,020 --> 00:02:51,170
And if we do that and we save, we now see we have some spacing around that, just like that. You also
40
00:02:51,410 --> 00:03:00,840
can of course do more, let's say we want to have a border. Conveniently, the container has a decoration argument.
41
00:03:01,380 --> 00:03:06,570
Decoration here takes the decoration class but actually and that's something you learned from the docs
42
00:03:06,570 --> 00:03:13,830
or from this course, you should use BoxDecoration here, instantiate that and now that is a class
43
00:03:14,130 --> 00:03:20,610
which gives you a lot of crucial arguments to style the decoration and therefore the appearance of
44
00:03:20,610 --> 00:03:23,370
that container. Not every widget has a decoration
45
00:03:23,370 --> 00:03:27,600
argument, row for example doesn't have one but the container has.
46
00:03:27,600 --> 00:03:35,490
So here for example, we could now also assign a border. Now a border again is not simply a number or anything
47
00:03:35,490 --> 00:03:41,630
like that, here it's instead of type BoxBorder. So you could think that you need to type BoxBorder and
48
00:03:41,630 --> 00:03:47,780
see what that gives you but actually, the general border object is what you want here and there, you have
49
00:03:47,780 --> 00:03:54,980
some extra constructors and all is really useful because that allows you to define a border in all directions.
50
00:03:54,980 --> 00:04:00,200
If you just create border as an object like this with the normal constructor, you can specify the border
51
00:04:00,290 --> 00:04:06,800
for each side separately if you needed that. So Border.all allows us to draw a border around the container
52
00:04:06,860 --> 00:04:09,580
in all directions and you can give that a color
53
00:04:09,630 --> 00:04:12,320
and here I'll just use black,
54
00:04:12,320 --> 00:04:18,680
you can give that a width, maybe two pixels and a style and here you could choose from different styles
55
00:04:18,680 --> 00:04:20,830
like dotted and so on.
56
00:04:20,900 --> 00:04:23,190
If I auto format this and save this,
57
00:04:23,330 --> 00:04:29,870
now we see there is a border around our price. Now actually, some spacing inside of that border would
58
00:04:29,870 --> 00:04:30,860
be nice too
59
00:04:30,860 --> 00:04:36,020
and you learned that this could be done with padding, now not inside of the BoxDecoration but inside
60
00:04:36,020 --> 00:04:37,310
of the container
61
00:04:37,340 --> 00:04:42,150
and again if you're wondering how I know this, the IDE helped with control space and the official
62
00:04:42,170 --> 00:04:48,260
docs and of course resources like this course are your way to memorize this and then it's always about
63
00:04:48,260 --> 00:04:50,190
playing around with these things.
64
00:04:50,580 --> 00:04:55,310
Padding, just like margin takes EdgeInsets objects,
65
00:04:55,310 --> 00:05:02,380
so let's add EdgeInsets here and there I want to have the same padding in all directions, maybe 10.
66
00:05:02,470 --> 00:05:03,650
So this is taking shape,
67
00:05:03,670 --> 00:05:06,170
we now have a border with our amount in the middle,
68
00:05:06,220 --> 00:05:08,950
maybe we now also want to change the text style
69
00:05:08,950 --> 00:05:09,370
however.
7476
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.