Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,280 --> 00:00:04,070
So throughout this course section,
2
00:00:04,080 --> 00:00:11,100
we worked a bit with columns, rows and containers and these are, as you probably can tell already, three
3
00:00:11,100 --> 00:00:17,570
very important widgets that Flutter offers you and hence it's super important that you understand how
4
00:00:17,580 --> 00:00:21,610
container and column and row can work together and where they differ.
5
00:00:21,710 --> 00:00:28,620
Now one important difference of course is that a container takes exactly one child widget and the columns
6
00:00:28,620 --> 00:00:34,410
and rows on the opposite take multiple, an unlimited amount actually of child widgets which you pass
7
00:00:34,410 --> 00:00:36,550
in that list of children
8
00:00:36,720 --> 00:00:39,690
and that's of course a crucial difference.
9
00:00:39,690 --> 00:00:47,640
Another difference is that a container, unlike column and row, gives you rich alignment and styling options,
10
00:00:47,790 --> 00:00:55,350
as you saw you can add a decoration with this separate BoxDecoration object where you can add a border,
11
00:00:55,380 --> 00:01:01,920
a color, you can add margin and padding to a container, you can align things in the container if you want
12
00:01:01,920 --> 00:01:09,180
to. On column and row, you also have alignment options, on the cross and main axis but you have no styling
13
00:01:09,180 --> 00:01:10,080
options,
14
00:01:10,080 --> 00:01:16,590
if you want to give a column a border, that's not possible with the column alone.
15
00:01:16,590 --> 00:01:20,260
Now for the container, you also have a lot of options for the width.
16
00:01:20,370 --> 00:01:21,570
It's pretty flexible,
17
00:01:21,570 --> 00:01:23,720
by default it takes the child width
18
00:01:23,730 --> 00:01:29,250
but it also takes the available parent width if you have a parent with a fixed width.
19
00:01:29,520 --> 00:01:36,860
You can also give it its own width, you can set a width on the container and it will then take that
20
00:01:36,960 --> 00:01:42,690
and there are different rules and there's a different order on how a container sizes itself
21
00:01:42,960 --> 00:01:48,150
and in the official docs, you can read all about the exact order if you're interested in that.
22
00:01:48,170 --> 00:01:54,660
The core takeaway here is that you can really size the container, by the way not just regarding its width
23
00:01:54,690 --> 00:01:59,490
but also regarding its height as you want. For columns and rows,
24
00:01:59,490 --> 00:02:02,490
it's a bit different, there by default
25
00:02:02,490 --> 00:02:08,400
a column always takes the full available height and a row takes the full available width but that's
26
00:02:08,400 --> 00:02:09,270
basically it,
27
00:02:09,270 --> 00:02:15,660
you have no extra options or arguments you can set on column and row to configure the width and height.
28
00:02:16,530 --> 00:02:23,610
And therefore to sum it up, a container is perfect for custom styling, alignment, sizing, it's your go to
29
00:02:23,610 --> 00:02:29,010
widget if you want to wrap another widget because you want to transform that other widget because you
30
00:02:29,010 --> 00:02:35,410
want to assign some styling. On the other hand, columns and rows are must use widgets
31
00:02:35,490 --> 00:02:39,300
if you have widgets that sit next or above each other,
32
00:02:39,300 --> 00:02:44,760
so if you have more than one widget in a row or in a column, then there is no way around column
33
00:02:44,760 --> 00:02:46,370
and row basically.
34
00:02:46,670 --> 00:02:52,380
The really important takeaway here however is not that you always have to choose one of these two
35
00:02:52,800 --> 00:02:59,070
but that you can combine them together, wrap a column in a container or use a container in a column or
36
00:02:59,070 --> 00:03:02,640
in a row of course and you can then mix and match effects.
37
00:03:02,730 --> 00:03:08,730
You can have your own boxes with certain stylings inside of a column or you wrap your overall column
38
00:03:08,730 --> 00:03:11,810
to, for example add a border around it.
39
00:03:12,060 --> 00:03:19,080
That is all possible, so don't see containers and columns and rows as alternatives but see them as crucial
40
00:03:19,080 --> 00:03:25,890
building blocks in Flutter that can be mixed and matched to build a really flexible user interfaces.
41
00:03:25,890 --> 00:03:28,370
Now obviously, there are other important widgets too,
42
00:03:28,380 --> 00:03:34,560
it's not just container columns and rows but these three widgets will actually be commonly used and will
43
00:03:34,560 --> 00:03:35,640
get you very far.
4905
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.