Flutter: Clip a Column with Expanded when overflow

My use case is:

There are 3 widgets in a Column: widgets 1 and 3 are fixed height, and widget 2 will expand the available content.

        Container(
            height: 300,               // h0: dynamic height
            child: Column(
              children: [
                Container(
                  color: Colors.green,
                  width: 100,          // h1: fixed height
                  height: 100,
                ),
                Expanded(
                  child: Container(
                    color: Colors.red,
                    width: 100,        // h2: fill remain content
                    child: Placeholder(),
                  ),
                ),
                Container(
                  color: Colors.blue,
                  width: 100,          // h3: fixed height
                  height: 100,
                ),
              ],
            ),
          )

• When h0 > h1 + h3:
  • Show all 3 widgets -> Passed
• When h0 < h1 + h3:
  • Show widgets 1 and 3, the widget in Expanded will be invisible -> Passed
  • Clip the content if overflow -> Failed the content is not clipped and a warning Bottom overflow

I cannot use ScrollView because the content in Expanded should be flexible which ScrollView does not support behavior like that.

I can use ClipRect to clip the overflow content but the warning Bottom overflow still remains. Is there a way to dismiss the warning?

>Solution :

Try wrapping Column with SingleChildScrollView:

Container(
  height: 300, // h0: dynamic height
  child: CustomScrollView(
    slivers: [
      SliverFillRemaining(
        hasScrollBody: false,
        child: Column(
          children: [
            Container(
              color: Colors.green,
              width: 100, // h1: fixed height
              height: 100,
            ),
            Expanded(
              child: Container(
                color: Colors.red,
                width: 100, // h2: fill remain content
                child: Placeholder(),
              ),
            ),
            Container(
              color: Colors.blue,
              width: 100, // h3: fixed height
              height: 100,
            ),
          ],
        ),
      ),
    ],
  ),
),