Column
- Flutter course
- Beginner
- Lesson 31/99
- 4 min
Learn to stack widgets vertically with Column.
Column
Column is a widget that arranges multiple widgets vertically, one below another. Its children parameter takes a list of widgets. Column's main axis is vertical; mainAxisAlignment controls vertical distribution and crossAxisAlignment controls horizontal alignment.
Column(
children: [
Text('Birinci'),
Text('İkinci'),
Text('Üçüncü'),
],
)Column parameters
Column's most important parameters are: children (the list of widgets to arrange vertically), mainAxisAlignment (vertical distribution), crossAxisAlignment (horizontal alignment) and mainAxisSize (main axis size). Column fills all vertical space by default; with mainAxisSize: MainAxisSize.min it shrinks to fit its content.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text('Kısa'),
Text('Sütun'),
],
)Practice Print Column info
In main, print two lines with print: column dikey and children liste.
Starter code
void main() {
// iki satır yazdır:
// column dikey
// children liste
}Sample solution
void main() {
print('column dikey');
print('children liste');
}Expected output
column dikey children liste
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 In which direction does Column arrange widgets?
- Horizontally side by side
- Vertically one below another Correct answer
- In random order
- Overlapping on top of each other
Explanation: Column arranges widgets vertically one below another; Row arranges them horizontally side by side.
2 List the children
Column(
____: [
Text('Bir'),
Text('İki'),
],
)Column(
children: [
Text('Bir'),
Text('İki'),
],
)Explanation: The children parameter gives Column the list of widgets to arrange.
3 Column concepts
| Term | Meaning |
|---|---|
Column |
Widget that arranges widgets vertically |
children |
List of widgets to arrange vertically |
mainAxisAlignment |
Vertical distribution |
crossAxisAlignment |
Horizontal alignment |