All language subtitles for 14. Containers vs Columns vs Rows

So throughout this course section,

we worked a bit with columns, rows and containers and these are, as you probably can tell already, three

very important widgets that Flutter offers you and hence it's super important that you understand how

container and column and row can work together and where they differ.

Now one important difference of course is that a container takes exactly one child widget and the columns

and rows on the opposite take multiple, an unlimited amount actually of child widgets which you pass

in that list of children

and that's of course a crucial difference.

Another difference is that a container, unlike column and row, gives you rich alignment and styling options,

as you saw you can add a decoration with this separate BoxDecoration object where you can add a border,

a color, you can add margin and padding to a container, you can align things in the container if you want

to. On column and row, you also have alignment options, on the cross and main axis but you have no styling

options,

if you want to give a column a border, that's not possible with the column alone.

Now for the container, you also have a lot of options for the width.

It's pretty flexible,

by default it takes the child width

but it also takes the available parent width if you have a parent with a fixed width.

You can also give it its own width, you can set a width on the container and it will then take that

and there are different rules and there's a different order on how a container sizes itself

and in the official docs, you can read all about the exact order if you're interested in that.

The core takeaway here is that you can really size the container, by the way not just regarding its width

but also regarding its height as you want. For columns and rows,

it's a bit different, there by default

a column always takes the full available height and a row takes the full available width but that's

basically it,

you have no extra options or arguments you can set on column and row to configure the width and height.

And therefore to sum it up, a container is perfect for custom styling, alignment, sizing, it's your go to

widget if you want to wrap another widget because you want to transform that other widget because you

want to assign some styling. On the other hand, columns and rows are must use widgets

if you have widgets that sit next or above each other,

so if you have more than one widget in a row or in a column, then there is no way around column

and row basically.

The really important takeaway here however is not that you always have to choose one of these two

but that you can combine them together, wrap a column in a container or use a container in a column or

in a row of course and you can then mix and match effects.

You can have your own boxes with certain stylings inside of a column or you wrap your overall column

to, for example add a border around it.

That is all possible, so don't see containers and columns and rows as alternatives but see them as crucial

building blocks in Flutter that can be mixed and matched to build a really flexible user interfaces.

Now obviously, there are other important widgets too,

it's not just container columns and rows but these three widgets will actually be commonly used and will

get you very far.