Home > Back-end >  Flutter column with elements aligning to different sides without stretching the width of the column
Flutter column with elements aligning to different sides without stretching the width of the column

Time:02-18

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