Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
1
00:00:00,630 --> 00:00:04,950
Now in this lesson, I want to talk to you about one of the most fundamental widgets that we're going
1
2
00:00:04,950 --> 00:00:08,220
to be using all the time, to lay out our apps.
2
3
00:00:08,430 --> 00:00:10,870
And that is a container widget.
3
4
00:00:11,160 --> 00:00:16,800
Now a container widget, for those you guys who have done a little bit of Web Development or Web Design,
4
5
00:00:17,250 --> 00:00:19,650
is very similar to a Div.
5
6
00:00:19,650 --> 00:00:22,220
It's essentially just a layout box.
6
7
00:00:22,260 --> 00:00:27,480
You can position it and move it around on the screen, and then you can give it a child to display such
7
8
00:00:27,480 --> 00:00:30,210
as an image or a piece of text.
8
9
00:00:30,210 --> 00:00:37,770
Now whenever you're using a new widget from Flutter, my top tip is to always start with the documentation.
9
10
00:00:37,860 --> 00:00:44,220
As I said previously, Flutter's documentation is really good. And all you have to do to find it, is head
10
11
00:00:44,220 --> 00:00:50,610
over to flutter.dev and we're going to go over to the widget catalog. And again, you'll find this
11
12
00:00:50,610 --> 00:00:54,930
URL to get here directly, in the course resources.
12
13
00:00:54,930 --> 00:01:01,260
Now once you're here, you can see that the team has organized all of the widgets based on what they do.
13
14
00:01:01,350 --> 00:01:07,260
And we've already seen some of the images and assets widgets, but now we're going to be looking at the
14
15
00:01:07,350 --> 00:01:14,310
layout section. And these other widgets that allows you to arrange other widgets. So how to position things
15
16
00:01:14,400 --> 00:01:17,270
on screen. And under the layout widget,
16
17
00:01:17,400 --> 00:01:24,030
you can see that they are split by single-child widgets and multi-child widgets. A widget that can contain
17
18
00:01:24,510 --> 00:01:32,160
a single widget, say a piece of text or an image, or lots of different widgets, such as five images or an
18
19
00:01:32,190 --> 00:01:33,910
image and a piece of text.
19
20
00:01:33,950 --> 00:01:38,730
And in this module, we're going to be exploring both single child, and multi-channel widgets to learn
20
21
00:01:38,730 --> 00:01:42,960
how to lay out your screen, exactly the way that you want it to look.
21
22
00:01:43,170 --> 00:01:47,090
The most commonly use single child widget is probably going to be a container.
22
23
00:01:47,130 --> 00:01:54,600
And if we click on it, we get taken to the container class. And this is a widget that allows us to position
23
24
00:01:54,630 --> 00:01:57,260
other widgets and size other widgets.
24
25
00:01:57,360 --> 00:02:03,020
And if you read through this, you'll learn a lot about exactly how it works.
25
26
00:02:03,090 --> 00:02:11,250
And one of the things that it tells you is that, containers with no children try to be as big as possible.
26
27
00:02:12,490 --> 00:02:14,970
And this is exactly what we're seeing over here.
27
28
00:02:14,980 --> 00:02:19,170
We have a container that is currently trying to be as big as possible.
28
29
00:02:19,180 --> 00:02:20,140
How do we know that?
29
30
00:02:20,140 --> 00:02:21,190
Well let's give it a color.
30
31
00:02:21,190 --> 00:02:22,600
Let's see it for ourselves.
31
32
00:02:22,990 --> 00:02:31,190
So let's go ahead and change this back to teal, and instantly, we have our background using hot reload.
32
33
00:02:31,450 --> 00:02:33,220
And now inside the container,
33
34
00:02:33,220 --> 00:02:41,960
so inside these round brackets, I'm gonna hit ENTER and I'm going to change its color. And here we get
34
35
00:02:41,960 --> 00:02:44,750
to specify a color for our container.
35
36
00:02:44,750 --> 00:02:49,240
Let's change our container to have a color of white.
36
37
00:02:49,760 --> 00:02:57,170
So now when I hit save and hot reload, you can see that my entire screen changes to white, even though
37
38
00:02:57,230 --> 00:03:00,440
we know that the background color is still teal.
38
39
00:03:00,770 --> 00:03:08,030
And the reason for this is because our container is taking up all of the space that's available, exactly
39
40
00:03:08,210 --> 00:03:09,200
as described here.
40
41
00:03:09,200 --> 00:03:10,540
Containers with no children
41
42
00:03:10,550 --> 00:03:18,080
try to be as big as possible. Our container currently doesn't have anything inside the child property.
42
43
00:03:18,080 --> 00:03:21,160
So that's why it tries to be as big as possible.
43
44
00:03:21,290 --> 00:03:23,120
But what if we did give it a child.
44
45
00:03:23,120 --> 00:03:25,670
What if we gave it a child widget
45
46
00:03:25,670 --> 00:03:28,860
that's a piece of text, say that just says 'Hello.'
46
47
00:03:28,880 --> 00:03:29,280
Right.
47
48
00:03:29,330 --> 00:03:37,640
Let's hit save, and immediately our container shrinks to the size of the child widget. And we could have
48
49
00:03:37,640 --> 00:03:43,640
known this by reading the documentation. Containers with children size themselves to their children's
49
50
00:03:43,730 --> 00:03:51,320
size. And our child in this case, is the piece of text and its size is determined by the font size of
50
51
00:03:51,320 --> 00:03:52,910
that piece of text.
51
52
00:03:52,910 --> 00:03:59,870
Now at the moment, you can see that all piece of text is kind of hidden away a bit by the bezel of our
52
53
00:03:59,990 --> 00:04:06,890
iPhone screen, and on Android depending on which device you're simulating it on, it might also have a
53
54
00:04:06,890 --> 00:04:08,120
notch like this.
54
55
00:04:08,690 --> 00:04:15,950
So how do we keep our content that we put on screen, safe from all of these bordering elements like the
55
56
00:04:16,580 --> 00:04:25,260
top bar where we've got our time and our signal and our notch? Well Flutter actually comes with a really
56
57
00:04:25,320 --> 00:04:28,220
simple widget that does exactly this.
57
58
00:04:28,230 --> 00:04:35,850
It's called a safe area. And anything that you put inside the safe area, will be inside the parts which
58
59
00:04:35,850 --> 00:04:41,080
don't have a notch or an interactive area like this part on the iPhone here.
59
60
00:04:41,310 --> 00:04:49,620
In order to embed our container inside a safe area, we can hold down OPTION or ALT and hit ENTER, to pull
60
61
00:04:49,620 --> 00:04:57,660
up our intention actions here, our little menu. And I'm going to wrap our container, which is what's currently
61
62
00:04:57,660 --> 00:05:07,710
selected, inside a new widget. And all that does, is it puts our previous container inside a new widget,
62
63
00:05:08,190 --> 00:05:11,160
and it sets it as the child of that widget.
63
64
00:05:11,160 --> 00:05:17,670
So now, we get to change this widget and I'm gonna call it a Safe Area, with a capital S and a capital
64
65
00:05:17,730 --> 00:05:18,870
A.
65
66
00:05:18,870 --> 00:05:28,200
Now as soon as I hit save, you'll see my container moves in to the safe area and it now only takes up
66
67
00:05:28,440 --> 00:05:31,470
the space where it's visible to the user.
67
68
00:05:33,140 --> 00:05:39,290
Whenever you're creating something for the user interface that you don't want to bleed all the way to
68
69
00:05:39,290 --> 00:05:43,500
the edges but instead you want it to be fully visible to the user,
69
70
00:05:43,640 --> 00:05:46,920
then you're gonna be using your safe area.
70
71
00:05:46,960 --> 00:05:48,760
What else can you do with your container?
71
72
00:05:49,270 --> 00:05:54,580
Well we can also change its size, such as its width and its height.
72
73
00:05:54,580 --> 00:06:01,540
So if we just go ahead and add a new property called height, and let's set it to maybe a 100 pixels,
73
74
00:06:01,540 --> 00:06:06,540
100 points. And let's change the width also to a 100.
74
75
00:06:06,550 --> 00:06:13,760
So now we should have a 100 by 100, so a square container, as soon as I hit save.
75
76
00:06:13,860 --> 00:06:15,060
And there you go.
76
77
00:06:15,060 --> 00:06:22,280
We've got our square container, with a single child that is the piece of text that says 'Hello.' Now what
77
78
00:06:22,280 --> 00:06:29,020
if I wanted my container to be a little bit offset from the edges of the screen.
78
79
00:06:29,030 --> 00:06:32,120
What if I wanted to set a margin for my container?
79
80
00:06:32,780 --> 00:06:39,500
Well, I can use the margin property. And to specify the margin property, we have to use something called
80
81
00:06:39,920 --> 00:06:41,390
edge insets.
81
82
00:06:41,450 --> 00:06:47,160
And you can see there's different types of insetting an edge. You can use the all,
82
83
00:06:47,210 --> 00:06:54,440
which means that whatever you enter here, let's say 20 pixels, is going to be set for all four sides of
83
84
00:06:54,440 --> 00:06:55,220
your container.
84
85
00:06:55,430 --> 00:07:02,330
So there's now a little margin of 20, for the left, the top, the right and the bottom.
85
86
00:07:02,330 --> 00:07:03,910
Now what if we didn't want that.
86
87
00:07:03,920 --> 00:07:08,210
What if we wanted to only set it for the top and the bottom?
87
88
00:07:08,690 --> 00:07:10,850
Well, then you can use symmetric.
88
89
00:07:10,850 --> 00:07:20,450
So now you can say that for the vertical axes, I want it to have a 50, but for the horizontal axis, I only
89
90
00:07:20,450 --> 00:07:23,120
want it to have 10 for the margin.
90
91
00:07:23,660 --> 00:07:31,010
So now if we hit save, you can see that it's offset from the top by 50 and from the left and right it's
91
92
00:07:31,070 --> 00:07:32,340
only 10.
92
93
00:07:32,600 --> 00:07:39,200
And you can always view this easily by going to the Flutter Inspector and clicking on this button here.
93
94
00:07:39,890 --> 00:07:47,690
And now, you can see the margin for our container at the top and bottom being 50, and the left and right
94
95
00:07:47,840 --> 00:07:56,800
being 10. And you can also see the safe area which is this box over here as well. Now instead of symmetric
95
96
00:07:56,890 --> 00:08:03,520
where you provide the same value for the top, bottom and the same value for left and right, you can also
96
97
00:08:03,880 --> 00:08:11,100
give it different values for each side. So you can either say, 'from LTRB'
97
98
00:08:11,110 --> 00:08:15,310
So this is left, top, right and bottom. Left,
98
99
00:08:15,340 --> 00:08:19,710
let's say it's 30, top is 10,
99
100
00:08:19,870 --> 00:08:20,440
right
100
101
00:08:20,440 --> 00:08:25,570
is 50, bottom is 20. Every single side
101
102
00:08:25,570 --> 00:08:33,000
I've given a different margin. And now, when I hit save, you can see how our box changes right.
102
103
00:08:33,010 --> 00:08:41,440
You can see that the left is 30, the top is 10, the right is 50 and the bottom is 20.
103
104
00:08:41,440 --> 00:08:51,540
So this box here, is what our margins are doing to our screen. But if you didn't want to have four values
104
105
00:08:51,540 --> 00:09:01,590
specified, you can use the 'only'. So saying 'only' gonna set a margin for the left, which is 30. And now everything
105
106
00:09:01,590 --> 00:09:05,860
else is left as zero and only the left gets that margin.
106
107
00:09:05,940 --> 00:09:11,280
So there's all sorts of ways that you can do this. Now,
107
108
00:09:11,440 --> 00:09:18,460
what if you wanted to have the child of the container to be a little bit more offset from the edge of
108
109
00:09:18,460 --> 00:09:19,790
the container.
109
110
00:09:19,960 --> 00:09:26,170
In this case, you wouldn't be using the margin and you would instead be using a padding.
110
111
00:09:26,170 --> 00:09:33,310
So if you've ever worked with CSS or Web Design, then this will all feel very intuitive to you.
111
112
00:09:33,430 --> 00:09:39,740
And remembering that the Flutter team actually came from a background of Web Development,
112
113
00:09:39,820 --> 00:09:44,400
this is one of the reasons why it might be so familiar and so intuitive to work with.
113
114
00:09:44,800 --> 00:09:49,400
So for the padding, it also expects a edge inset.
114
115
00:09:49,810 --> 00:09:52,210
So let's go ahead and provide one.
115
116
00:09:52,390 --> 00:10:00,190
And this allows us to set basically different values for the padding, for all four edges of whatever
116
117
00:10:00,190 --> 00:10:03,200
it is that we're setting it to, which in this case is our container.
117
118
00:10:03,910 --> 00:10:06,430
Let's add a padding for all sides,
118
119
00:10:06,460 --> 00:10:08,200
that's 20.
119
120
00:10:08,290 --> 00:10:15,070
And when I hit save, you'll see that I now have a little box inside my container, that's limiting the
120
121
00:10:15,070 --> 00:10:18,550
child to this area right here.
121
122
00:10:18,550 --> 00:10:25,740
And if I go ahead and remove all of these guidelines, then you can see that this is what I end up with.
122
123
00:10:25,900 --> 00:10:32,140
I've got a container that's pushed slightly away from the edges of the screen, and I've got its content
123
124
00:10:32,170 --> 00:10:34,640
pushed away from the edges of the container.
124
125
00:10:34,900 --> 00:10:43,470
So margin is for the outside of your widget, and padding is for the inside of your widget.
125
126
00:10:43,510 --> 00:10:48,760
And remember that a container can only have one child.
126
127
00:10:48,820 --> 00:10:49,470
Right.
127
128
00:10:49,480 --> 00:10:57,550
So for example, I can't have a piece of text and maybe say an image. That won't work. Because remember
128
129
00:10:57,610 --> 00:11:02,590
the widget itself, can only have a single child.
129
130
00:11:02,590 --> 00:11:08,260
So we're only laying out a single child. In the next lesson, we're going to look at some of the ways for
130
131
00:11:08,260 --> 00:11:13,030
laying out multiple children namely, using widgets such as columns and rows.
131
132
00:11:13,360 --> 00:11:16,420
So all of that and more, I'll see on the next lesson.
14758
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.