Question 79298 in Flutter Question posted in
The official Flutter documentation can be found here.

Why does Column CrossAxisAlignment.stretch cause the Column to grow? – Flutter

I have a layout like this:

Container(
  alignment: Alignment.center,
  color: Colors.blueGrey,
  child: Container(
    color: Colors.amber,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 150, // Dummy - actual width is unknown
          height: 100,
          color: Colors.red,
        ),
        Container(
          width: 300, // Dummy - actual width is unknown
          height: 100,
          color: Colors.green,
        )
      ],
    ),
  ),
)

Which produces this layout:

Current state

Then I add crossAxisAlignment: CrossAxisAlignment.stretch, to the Column, expecting this:

expected

However, what actually happens is this:

actual

Why? How can I achieve my expected result?

Tags:

2

Answers


  1. 0

    Set padding to your root container

    padding: EdgeInsets.all(20)
    Login or Signup to reply.
  2. 0

    stretchwill try to get as much space as possible. You can set the yellow Container width and use stretch but this is hard-coded. Also you use IntrinsicWidth over Column widget and it will use max child width , but it has some cost.

    Container(
  alignment: Alignment.center,
  color: Colors.blueGrey,
  child: IntrinsicWidth(
    child: Container(
      color: Colors.amber,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 150, // Dummy - actual width is unknown
            height: 100,
            color: Colors.red,
          ),
          Container(
            width: 300, // Dummy - actual width is unknown
            height: 100,
            color: Colors.green,
          )
        ],
      ),
    ),
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search