All language subtitles for 041 How to Use Container Widgets.en_US
Afrikaans
Albanian
Amharic
Arabic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Filipino
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hausa
Hawaiian
Hebrew
Hindi
Hmong
Hungarian
Icelandic
Igbo
Indonesian
Irish
Italian
Japanese
Javanese
Kannada
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latin
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Malayalam
Maltese
Maori
Marathi
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Persian
Polish
Portuguese
Punjabi
Romanian
Russian
Samoan
Scots Gaelic
Serbian
Sesotho
Shona
Sindhi
Sinhala
Slovak
Slovenian
Somali
Spanish
Sundanese
Swahili
Swedish
Tajik
Tamil
Telugu
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
Welsh
Xhosa
Yiddish
Yoruba
Zulu
Odia (Oriya)
Kinyarwanda
Turkmen
Tatar
Uyghur
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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
2
00:00:04,950 --> 00:00:08,220
to be using all the time, to lay out our apps.
3
00:00:08,430 --> 00:00:10,870
And that is a container widget.
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,
5
00:00:17,250 --> 00:00:19,650
is very similar to a Div.
6
00:00:19,650 --> 00:00:22,220
It's essentially just a layout box.
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
8
00:00:27,480 --> 00:00:30,210
as an image or a piece of text.
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.
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
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
12
00:00:50,610 --> 00:00:54,930
URL to get here directly, in the course resources.
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.
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
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
16
00:01:14,400 --> 00:01:17,270
on screen. And under the layout widget,
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
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
19
00:01:32,190 --> 00:01:33,910
image and a piece of text.
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
21
00:01:38,730 --> 00:01:42,960
how to lay out your screen, exactly the way that you want it to look.
22
00:01:43,170 --> 00:01:47,090
The most commonly use single child widget is probably going to be a container.
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
24
00:01:54,630 --> 00:01:57,260
other widgets and size other widgets.
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.
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.
27
00:02:12,490 --> 00:02:14,970
And this is exactly what we're seeing over here.
28
00:02:14,980 --> 00:02:19,170
We have a container that is currently trying to be as big as possible.
29
00:02:19,180 --> 00:02:20,140
How do we know that?
30
00:02:20,140 --> 00:02:21,190
Well let's give it a color.
31
00:02:21,190 --> 00:02:22,600
Let's see it for ourselves.
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.
33
00:02:31,450 --> 00:02:33,220
And now inside the container,
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
35
00:02:41,960 --> 00:02:44,750
to specify a color for our container.
36
00:02:44,750 --> 00:02:49,240
Let's change our container to have a color of white.
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
38
00:02:57,230 --> 00:03:00,440
we know that the background color is still teal.
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
40
00:03:08,210 --> 00:03:09,200
as described here.
41
00:03:09,200 --> 00:03:10,540
Containers with no children
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.
43
00:03:18,080 --> 00:03:21,160
So that's why it tries to be as big as possible.
44
00:03:21,290 --> 00:03:23,120
But what if we did give it a child.
45
00:03:23,120 --> 00:03:25,670
What if we gave it a child widget
46
00:03:25,670 --> 00:03:28,860
that's a piece of text, say that just says 'Hello.'
47
00:03:28,880 --> 00:03:29,280
Right.
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
49
00:03:37,640 --> 00:03:43,640
known this by reading the documentation. Containers with children size themselves to their children's
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
51
00:03:51,320 --> 00:03:52,910
that piece of text.
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
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
54
00:04:06,890 --> 00:04:08,120
notch like this.
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
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
57
00:04:25,320 --> 00:04:28,220
simple widget that does exactly this.
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
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.
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
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
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,
63
00:05:08,190 --> 00:05:11,160
and it sets it as the child of that widget.
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
65
00:05:17,730 --> 00:05:18,870
A.
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
67
00:05:28,440 --> 00:05:31,470
the space where it's visible to the user.
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
69
00:05:39,290 --> 00:05:43,500
the edges but instead you want it to be fully visible to the user,
70
00:05:43,640 --> 00:05:46,920
then you're gonna be using your safe area.
71
00:05:46,960 --> 00:05:48,760
What else can you do with your container?
72
00:05:49,270 --> 00:05:54,580
Well we can also change its size, such as its width and its height.
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,
74
00:06:01,540 --> 00:06:06,540
100 points. And let's change the width also to a 100.
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.
76
00:06:13,860 --> 00:06:15,060
And there you go.
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
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.
79
00:06:29,030 --> 00:06:32,120
What if I wanted to set a margin for my container?
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
81
00:06:39,920 --> 00:06:41,390
edge insets.
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,
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
84
00:06:54,440 --> 00:06:55,220
your container.
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.
86
00:07:02,330 --> 00:07:03,910
Now what if we didn't want that.
87
00:07:03,920 --> 00:07:08,210
What if we wanted to only set it for the top and the bottom?
88
00:07:08,690 --> 00:07:10,850
Well, then you can use symmetric.
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
90
00:07:20,450 --> 00:07:23,120
want it to have 10 for the margin.
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
92
00:07:31,070 --> 00:07:32,340
only 10.
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.
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
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
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
97
00:08:03,880 --> 00:08:11,100
give it different values for each side. So you can either say, 'from LTRB'
98
00:08:11,110 --> 00:08:15,310
So this is left, top, right and bottom. Left,
99
00:08:15,340 --> 00:08:19,710
let's say it's 30, top is 10,
100
00:08:19,870 --> 00:08:20,440
right
101
00:08:20,440 --> 00:08:25,570
is 50, bottom is 20. Every single side
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.
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.
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
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
106
00:09:01,590 --> 00:09:05,860
else is left as zero and only the left gets that margin.
107
00:09:05,940 --> 00:09:11,280
So there's all sorts of ways that you can do this. Now,
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
109
00:09:18,460 --> 00:09:19,790
the container.
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.
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.
112
00:09:33,430 --> 00:09:39,740
And remembering that the Flutter team actually came from a background of Web Development,
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.
114
00:09:44,800 --> 00:09:49,400
So for the padding, it also expects a edge inset.
115
00:09:49,810 --> 00:09:52,210
So let's go ahead and provide one.
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
117
00:10:00,190 --> 00:10:03,200
it is that we're setting it to, which in this case is our container.
118
00:10:03,910 --> 00:10:06,430
Let's add a padding for all sides,
119
00:10:06,460 --> 00:10:08,200
that's 20.
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
121
00:10:15,070 --> 00:10:18,550
child to this area right here.
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.
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
124
00:10:32,170 --> 00:10:34,640
pushed away from the edges of the container.
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.
126
00:10:43,510 --> 00:10:48,760
And remember that a container can only have one child.
127
00:10:48,820 --> 00:10:49,470
Right.
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
129
00:10:57,610 --> 00:11:02,590
the widget itself, can only have a single child.
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
131
00:11:08,260 --> 00:11:13,030
laying out multiple children namely, using widgets such as columns and rows.
132
00:11:13,360 --> 00:11:16,420
So all of that and more, I'll see on the next lesson.
13682
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.