flutter

Flutter column with elements aligning to different sides without stretching the width of the column


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.


Solution

  • 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,
                ),
              ),
            ],
          ),
        ),
      ),
    );