I'd like to have a column take the width of the content, and have some elements align to right and some to the left.
Is this possible?
If I use Align widget on the children the whole column stretches in width. Is there another way?
Thank you
Edit: Example
Center(
child: Container(
color: Colors.yellow,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.red,
width: 50,
height: 50,
),
Text('Here goes some text with variable length'),
Container(
color: Colors.blue,
width: 50,
height: 50,
),
],
),
),
);
I want the column above with the red square to the left and the blue to the right (and the column not stretching to the available width).
Edit: I cannot use things with fixed widths or heights.
you need to wrap your Column
with an IntrinsicWidth
return Center(
child: IntrinsicWidth(
child: Container(
color: Colors.yellow,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
color: Colors.red,
width: 50,
height: 50,
),
),
Text('Here goes some text with variable length'),
Align(
alignment: Alignment.centerRight,
child: Container(
color: Colors.blue,
width: 50,
height: 50,
),
),
],
),
),
),
);