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,
),
SizedBox(width: 100),
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).
CodePudding user response:
You can simply try to put the contents of the column in a row, so you would have elements inside containers for their width and height as you like. Column -> Row -> aligned containers. Hope this helps.
CodePudding user response:
Try this-
Center(
child: Container(
color: Colors.yellow,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
color: Colors.red,
width: 50,
height: 50,
),
],
),
SizedBox(width: 100),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
color: Colors.blue,
width: 50,
height: 50,
),
],
),
],
),
),
)