Flutter fill Column with items evenly

Question

I have a simple Column with 2 Containers and a SizedBox inside of it. I simply would like to have the SizedBox in the middle of them and the Containers should fill fill the space above/below. I can achieve that by setting the height but that is not dynamic and it needs to be dynamic.

This is how it looks right now:

And my code:

Column(
  children: [
    // counter_container
    Container(
      width: detailContainerWidth,
      height: detailContainerHeight,
      decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.only(
            topRight: const Radius.circular(cornerRadius),
          )),
    ),
    SizedBox(
      height: spacingBetweenViews,
    ),
    // price_container
    Container(
      width: detailContainerWidth,
      height: detailContainerHeight,
      decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.only(
            bottomRight:
                const Radius.circular(cornerRadius),
          )),
    )
  ],
)

Is there a way to make this dynamically instead of setting the height of the two Containers?

Answer 1

Pay attention that Flexible Widgets are FlexFit.loose by default. If you want the green and the blue containers to be always the same height, regardless of their content, you should use FlexFit.tight, or the Expanded Widget.

Expanded is just Flexible with FlexFit.tight. [more info]

With Flexible:

With Expanded:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // counter_container
        Expanded(
          child: Container(
              decoration: BoxDecoration(
                color: Colors.green,
                borderRadius: BorderRadius.only(
                  topRight: const Radius.circular(20.0),
                ),
              ),
              child:
                  (Text('HAHAHA\nHAHAHA\nHAHAHA\nHAHAHA\nHAHAHA\nHAHAHA\n'))),
        ),

        SizedBox(
          height: 8.0,
        ),
        // price_container
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.only(
                bottomRight: const Radius.circular(20.0),
              ),
            ),
          ),
        )
      ],
    );
  }
}

Note: I also added crossAxisAlignment: CrossAxisAlignment.stretch to your Column so that your container fill the width of the screen.

Answer 2

I have found the solution by myself. Let me know if there is a better way to get this done, but my is working so I a fine with it for now:

  Flexible(
      child: Column(
        children: [
          // counter_container
          Flexible(
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.only(
                    topRight:
                        const Radius.circular(cornerRadius),
                  )),
              ),
            ),
          ),
          SizedBox(
            height: spacingBetweenViews,
          ),
          // price_container
          Flexible(
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.only(
                    bottomRight:
                        const Radius.circular(cornerRadius),
                  )),
            ),
          )
        ],
      ),
    )