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

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

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

Tags:

3

Answers


  1. 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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

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

Back To Top
Search