I have Row widget that contains a column with colorful containers and the red icon.
Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 5),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 30,
width: 100,
color: Colors.yellow,
),
Container(
height: 30,
width: 100,
color: Colors.green,
),
Container(
height: 30,
width: 100,
color: Colors.lightGreenAccent,
),
],
),
),
Icon(
Icons.add_circle,
color: Colors.red,
size: 30,
)
],
)
I want the red icon to be located not in the center, but on top (near the first yellow container). crossAxisAlignment: CrossAxisAlignment.start not working. How can it be moved up?
1
- By setting crossAxisAlignment: CrossAxisAlignment.start on the Row, both the Column and the Icon are aligned at the start (top in this case).
- The Column’s children (the containers) will stack vertically, while the Icon will be placed beside the column, aligned to the top.
Thus, your provided code will work as expected:
Row(
crossAxisAlignment: CrossAxisAlignment.start, // Aligns children
children: [
Padding(
padding: const EdgeInsets.only(right: 5),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, // Aligns containers to the start
children: [
Container(
height: 30,
width: 100,
color: Colors.yellow,
),
Container(
height: 30,
width: 100,
color: Colors.green,
),
Container(
height: 30,
width: 100,
color: Colors.lightGreenAccent,
),
],
),
),
const Icon(
Icons.add_circle,
color: Colors.red,
size: 30, // Icon will be aligned at the top next to the yellow container
),
],