Row
- Flutter course
- Beginner
- Lesson 32/99
- 4 min
Learn to lay out widgets horizontally with Row.
Row
Row is a widget that arranges multiple widgets horizontally, side by side. Like Column, its children parameter takes a list of widgets. Row's main axis is horizontal; mainAxisAlignment controls horizontal distribution and crossAxisAlignment controls vertical alignment.
Row(
children: [
Text('Sol'),
Text('Orta'),
Text('Sağ'),
],
)Row parameters
Row's parameters parallel Column's: children, mainAxisAlignment, crossAxisAlignment and mainAxisSize. But since Row's main axis is horizontal, mainAxisAlignment controls horizontal distribution and crossAxisAlignment controls vertical alignment. Row fills all width by default; MainAxisSize.min shrinks it to fit content.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.add),
Text('Ekle'),
Icon(Icons.close),
],
)Practice Print Row info
In main, print two lines with print: row yatay and mainAxis dagilim.
Starter code
void main() {
// iki satır yazdır:
// row yatay
// mainAxis dagilim
}Sample solution
void main() {
print('row yatay');
print('mainAxis dagilim');
}Expected output
row yatay mainAxis dagilim
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 In which direction does Row arrange widgets?
- Overlapping on top of each other
- Vertically one below another
- Horizontally side by side Correct answer
- In random order
Explanation: Row arranges widgets horizontally side by side; Column arranges them vertically one below another.
2 Return a Row
Widget build(BuildContext context) {
return ____(
children: [Text('a'), Text('b')],
);
}Widget build(BuildContext context) {
return Row(
children: [Text('a'), Text('b')],
);
}Explanation: The Row widget arranges children horizontally.
3 Row concepts
| Term | Meaning |
|---|---|
Row |
Widget that arranges widgets horizontally |
yatay ana eksen |
Row's main axis direction |
dikey çapraz eksen |
Row's cross axis direction |
MainAxisSize.min |
Shrinks Row to fit content |