CrossAxisAlignment
- Flutter course
- Beginner
- Lesson 34/99
- 4 min
Learn to align on the cross axis with CrossAxisAlignment.
CrossAxisAlignment
CrossAxisAlignment determines how children are aligned along the cross axis in Column and Row. In Column the cross axis is horizontal, in Row vertical. Common values: center, start, end, stretch (make children full width/height on the cross axis).
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text('Tam genişlik'),
Text('Aynı genişlik'),
],
)
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Orta'),
Text('Hizalı'),
],
)stretch vs center
stretch expands children as much as possible on the cross axis; in Column it makes each child full width, in Row full height. center centers children on the cross axis. stretch is especially useful with widgets that can take width such as Container and Button.
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(color: Colors.red, height: 40),
Container(color: Colors.blue, height: 40),
],
)Practice Print CrossAxisAlignment info
In main, print two lines with print: crossAxis capraz and stretch yay.
Starter code
void main() {
// iki satır yazdır:
// crossAxis capraz
// stretch yay
}Sample solution
void main() {
print('crossAxis capraz');
print('stretch yay');
}Expected output
crossAxis capraz stretch yay
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does CrossAxisAlignment.stretch do?
- Centers children
- Hides children
- Arranges children randomly
- Makes children full width/height on the cross axis Correct answer
Explanation: stretch expands children as much as possible on the cross axis.
2 Stretch the children
crossAxisAlignment: CrossAxisAlignment.____,
children: [Text('A'), Text('B')],crossAxisAlignment: CrossAxisAlignment.stretch,
children: [Text('A'), Text('B')],Explanation: The stretch value expands children on the cross axis.
3 CrossAxisAlignment concepts
| Term | Meaning |
|---|---|
CrossAxisAlignment |
Cross axis alignment |
stretch |
Expand children on cross axis |
CrossAxisAlignment.start |
Align to cross axis start |
CrossAxisAlignment.end |
Align to cross axis end |