MainAxisAlignment
- Flutter course
- Beginner
- Lesson 33/99
- 4 min
Learn to align on the main axis with MainAxisAlignment.
MainAxisAlignment
MainAxisAlignment determines how children are distributed along the main axis in Column and Row. In Column the main axis is vertical, in Row horizontal. Common values: center, spaceBetween (equal space between, no edge margins), spaceEvenly (equal space including edges), start, end.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Ortada'),
],
)
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Sol'),
Text('Sağ'),
],
)spaceBetween vs spaceEvenly
spaceBetween sticks the first and last children to the edges and gives equal space between the rest. spaceEvenly distributes all space equally, including edges. center centers all children as a single block. start and end align children to the start or end respectively.
// spaceBetween: A --- B --- C (no edge margin)
// spaceEvenly: --- A --- B --- C --- (equal including edges)
// center: --- ABC --- (as a block, centered)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Text('A'), Text('B'), Text('C')],
)Practice Print MainAxisAlignment info
In main, print two lines with print: mainAxis eksen and spaceBetween bosluk.
Starter code
void main() {
// iki satır yazdır:
// mainAxis eksen
// spaceBetween bosluk
}Sample solution
void main() {
print('mainAxis eksen');
print('spaceBetween bosluk');
}Expected output
mainAxis eksen spaceBetween bosluk
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does MainAxisAlignment.spaceBetween do?
- Arranges children equally spaced without edge margins Correct answer
- Aligns children to the end
- Aligns children to the start
- Centers children
Explanation: spaceBetween sticks the first and last children to the edges and gives equal space between the rest.
2 Center the children
Column(
mainAxisAlignment: MainAxisAlignment.____,
children: [Text('X')],
)Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text('X')],
)Explanation: The center value centers children on the main axis.
3 MainAxisAlignment concepts
| Term | Meaning |
|---|---|
MainAxisAlignment |
Main axis distribution |
center |
Centers children |
spaceBetween |
Equal spacing without edge margins |
spaceEvenly |
Equal spacing including edges |