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

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?

Tags:

2

Answers


  1. 0

    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,
            ),
          ],
        ),
      ),
    ],
  ),
),
    Login or Signup to reply.
  2. 0

    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,
              ),
            ],
          ),
        ), 
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search