How to hide a part of the container widget beyond the screen without violating Flutter's layout constraints

Question

I am new to flutter. And i am trying to hide the bottom red part (see the first screenshot) of the blue container under the screen, in order to hide the buttom part of a white border and use this container for the animation. But it generates a problem (see see the second screenshot). Please help)

First screenshot: enter image description here

Second screenshot: enter image description here

This is the code of this Stack with two containers. I used the second one just for demonstration purposes. I need only one container.

...
 Stack(
              children: [
                
                Container(
                  alignment: Alignment.bottomCenter,
                  color: Colors.blue, 
                  height: 300, 
                ),
                Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: ClipRect(
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      heightFactor:
                          1, 
                      child: Container(
                        decoration: BoxDecoration(
                          color: Colors.red,
                          border: Border.all(
                              color: Color.fromARGB(255, 255, 255, 255)),
                        ),
                        height:
                            150,

                        
                        child: Center(
                          child: Text(
                            'Bottom Hidden Container',
                            style: TextStyle(fontSize: 24),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),

...

I have tried to remove this problem, but nothing seems to work. enter image description here

score 0 · Answer 1 · answered Jul 23 '23 at 11:40

0

you need to make your page scrollable (ListView or SingleChildScrollView widget) so it doesn't overflow.

You can then use the Opacity widget to dynamically change its visibility.

You may also use a boolean value to make it appear conditionally. For example:

bool showContainer = false;
child: showContainer 
            ? Center(...)          //if true
            : SizedBox.shrink();   //if false

SizedBox.shrink() widget returns an empty box

answered Jul 23 '23 at 11:40

Texv

1,225
10
14

But then it will be scrollable. I need it to overflow but without cousing an error. – Misha Danilenko Jul 23 '23 at 12:28
You still have to use the scrollable widgets to avoid overflow error. You can use this parameter to stop it from scrolling: physics: NeverScrollableScrollPhysics() – Texv Jul 23 '23 at 13:10
Or you can use the Expanded widget but this will resize your widgets – Texv Jul 23 '23 at 13:18

score 0 · Answer 2 · answered Jul 23 '23 at 12:56

If I'm not mistaken your trying to make a widget hidable, so just define a bool var like this:

bool isVisible = true;

after that, your widgets would be something like this:

Column(
            children: [
              InkWell(
                onTap: () {
                  isVisible = !isVisible;
                  setState(() {});
                },
                child: Container(
                  padding: const EdgeInsets.all(10),
                  color: Colors.blue,
                  child: const Center(
                    child: Text('Blue Container'),
                  ),
                ),
              ),
              if (isVisible)
                Container(
                  padding: const EdgeInsets.all(10),
                  color: Colors.red,
                  child: const Center(
                    child: Text('Red Container'),
                  ),
                ),
            ],
          ),

in this example by clicking the first container, the second container will be invisible. consider that your screen or your parent widget should be stateful.

Thanks for the answer. I did it already with `OverflowBox` – Misha Danilenko Jul 29 '23 at 13:54 — Misha Danilenko, Jul 29 '23 at 13:54

score 0 · Accepted Answer · answered Jul 23 '23 at 13:06

You can try OverflowBox widget allows its child to overflow its bounds without causing layout errors. Here's code:

 Stack(
  children: [
    Container(
      alignment: Alignment.bottomCenter,
      color: Colors.blue,
      height: 300,
    ),
    Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: OverflowBox(
        maxHeight: 300, // Set the maximum height to control how much is shown
        alignment: Alignment.bottomCenter,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.red,
            border: Border.all(color: Color.fromARGB(255, 255, 255, 255)),
          ),
          height: 150,
          child: Center(
            child: Text(
              'Bottom Hidden Container',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
      ),
    ),
  ],
)

Thanks, it works for me – Misha Danilenko Jul 29 '23 at 13:51 — Misha Danilenko, Jul 29 '23 at 13:51

How to hide a part of the container widget beyond the screen without violating Flutter's layout constraints

3 Answers3