Column places its children from top to bottom; Row from left to right. Both take a list of children.
mainAxisAlignmentplaces children along the main direction (down for Column, across for Row).crossAxisAlignmentplaces them in the other direction, e.g.CrossAxisAlignment.startlines them up on the left in a Column.Paddingadds space around one widget;SizedBox(height: 8)adds a fixed gap between two.Expandedmakes a child take all the space that is left in a Row or Column.
Long lists
A Column shows everything at once and can't scroll. For a list that can be long, use ListView.builder: it only builds the rows that are visible.
final lessons = ['Dart Basics', 'Widgets', 'Layouts'];
ListView.builder(
itemCount: lessons.length,
itemBuilder: (context, index) {
return ListTile(
leading: Text('${index + 1}'),
title: Text(lessons[index]),
);
},
)Code examples
Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text('Today', style: TextStyle(fontSize: 20)),
SizedBox(height: 8),
Row(
children: [
Icon(Icons.check_circle, color: Colors.green),
SizedBox(width: 8),
Text('Finish the Dart lesson'),
],
),
],
),
)Expected output
A "Today" heading on the left, and below it a green check icon next to "Finish the Dart lesson", all 16 pixels in from the edges.
Common mistakes
Common mistake: Yellow and black stripes: “A RenderFlex overflowed”
The children don't fit. Wrap a long list in a ListView, or wrap a wide child in Expanded so it shares the space.
Common mistake: Putting a ListView directly inside a Column
The ListView doesn't know how tall to be and throws an error. Wrap it in Expanded so it fills the remaining height.
Check your understanding
3 quick questions about this lesson.