Flutter: Clip a Column with Expanded when overflow-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

You can try it :

Container(
        height: 300,
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                color: Colors.green,
                width: 100, // h1: fixed height
                height: 100,
              ),
              Flexible(
                fit: FlexFit.loose,
                child: Container(
                  color: Colors.red,
                  width: 100, // h2: fill remain content
                  child: Placeholder(),
                ),
              ),
              Container(
                color: Colors.blue,
                width: 100, // h3: fixed height
                height: 100,
              ),
            ],
          ),
        ), 
      ),