Summary - Column and Row
- Flutter course
- Beginner
- Lesson 35/99
- 4 min
Combine Column, Row and alignments to make a profile row.
Column and Row summary
Column and Row are two fundamental layouts that arrange multiple widgets vertically and horizontally respectively. mainAxisAlignment sets distribution on the main axis, crossAxisAlignment sets alignment on the cross axis. By nesting Column inside Row or Row inside Column you can build two-dimensional layouts. Here you can build a profile row.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Ada Yılmaz', style: TextStyle(fontWeight: FontWeight.bold)),
Text('Flutter geliştirici'),
],
),
Icon(Icons.person),
],
)Practice Build a profile row and run
First print print('profil hazir'), then call runApp(MaterialApp(home: Row(...))). The Row should have mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center and children: [Text('Ada'), Icon(Icons.person)].
Starter code
import 'package:flutter/material.dart';
void main() {
// 'profil hazir' mesajını print ile yazdır
// runApp ile MaterialApp çağır; home bir Row olsun
}
// Row: ana eksen ve çapraz eksen hizalaması içersin
// children: Text ve Icon olsunSample solution
import 'package:flutter/material.dart';
void main() {
print('profil hazir');
runApp(MaterialApp(home: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [Text('Ada'), Icon(Icons.person)],
)));
}Expected output
profil hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which widget is used for a profile row (avatar left, name right)?
- Column
- Row Correct answer
- Stack
- Container
Explanation: A profile row places avatar and name side by side, so Row is used.
2 Set horizontal distribution
Row(
____: MainAxisAlignment.spaceBetween,
children: [Text('A'), Text('B')],
)Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [Text('A'), Text('B')],
)Explanation: The mainAxisAlignment parameter sets horizontal distribution in Row.
3 Column and Row combined
| Term | Meaning |
|---|---|
Dikey düzen |
With Column |
Yatay düzen |
With Row |
Ana eksen dağılımı |
With mainAxisAlignment |
Çapraz eksen hizalaması |
With crossAxisAlignment |