I have recently started learning Flutter. Under the concept of layout widgets, I came across container and column widgets. What I found similar is that both of these widgets align other widgets in column order. But I am unable to differentiate each of them.
In short, what is the difference between both of them, and in what scenario, either of these widgets are used?
You can put only exactly one child widget in a Container. The alignment property will affect only that single child.
You can put any number of children widgets in a Column. The alignment will affect all the children. Also, the children can have alignments in two axes, horizontal and vertical.
EDIT:
nice cheat-sheet for further reading https://pusher.com/tutorials/flutter-building-layouts and https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e
Container
This is the most used widget in every flutter app. It is mostly used to style its child widgets. It takes only one child. Some flutter widgets, focus only on their core functionality and does not contain much styling options. The container widget comes to the rescue and provides you with various common painting, positioning, and sizing widgets.
Container(
child: Widget //Another flutter widget
)
Row/Column
These are widgets that can contain multiple child widgets. The row is the widget that can display various child widgets in a horizontal manner. The column displays child widgets in a vertical manner. By default, these widgets don’t support scrolling. It can be enabled by wrapping with other widgets. But, if there are numerous child widgets, it is preferred to use ListView.
Row(
children: [
Container(), // First Widget
Text(), // Second Widget
----,
----, // Multiple Widgets
])
Column(
children: [
Container(), // First Widget
Text(), // Second Widget
----,
----, // Multiple Widgets
])
COMPARISON
|-------------------------------|------------------------------------|
| CONTAINER | COLUMN/ROW |
|-------------------------------|------------------------------------|
|*Takes exactly one child widget| *Takes multiple (unlimited) |
| | child widgets. |
| | |
|*Rich alignment and styling | *Alignment options available, but |
| options are available | there are no styling options. |
| | |
| | |
| | |
|*Flexible width |*Always takes full available |
| (e.g. child width, | height (column) /width (row) |
| available width, …) | |
| | |
| | |
|*Perfect for custom styling |*Must-use if widgets sit next |
| and alignment | to/above each other |
|-------------------------------|------------------------------------|
1) Container mostly use for styling your widget. Column use for showing vertically widgets.
2) Container have only one child widget. Column have multiple child widget
A column is literally a column. The widgets (can take children not just a child) go down in single file.
A container is a parent of only 1 widget. Solve this by adding a row or column. If you need to style a column use a column or row wrapped in a container.
Container(
//styling
Column(
//content
)
)