Container filled with widgets beond hight and width without getting overflowed

Question

I have a tricky one to solve. In this case I have a container which expands the height and width of the size of the device. Inside this widget I have other widgets that are placed beond the scope of the visible area. So now I get the error that the bottom area in this case is overflowed. I thought that I could just set the opacity to 0 and the flip it to 1 when I change state but that not the case since Flutter still knows that there is something there. In good old android you could set the visibility to "gone" to make it don't take up space.

Here is my code for the layout:

Container(
  color: primaryColor,
  child: Stack(
    fit: StackFit.loose,
    children: [
      SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Align(
            alignment: Alignment.topCenter,
            child: Column(
              children: [
                Icon(
                  Icons.swap_calls,
                  size: 100,
                  color: Colors.white,
                ),
                Text(
                  'TCM Sensory',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontWeight: FontWeight.w600),
                ),
                Text(
                  'Made to be perfect',
                  style: TextStyle(color: Colors.white),
                ),
              ],
            ),
          ),
        ),
      ),
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: AnimatedContainer(
              duration: Duration(milliseconds: 300),
              curve: Curves.easeInOut,
              height: _height,
              width: _width,
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: secondaryColor,
                borderRadius: BorderRadius.circular(_radius),
              ),
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          if (!_toggle) {
                            _radius = 0;
                            _width = MediaQuery.of(context).size.width;
                            _height = MediaQuery.of(context).size.height;
                            _title = "Press to Stop";
                            _color = primaryColor;
                            _toggle = true;
                          } else {
                            _radius = 10;
                            _width = 150;
                            _height = 50;
                            _title = "Press to Start";
                            _color = secondaryColor;
                            _toggle = false;
                          }
                        });
                      },
                      child: Container(
                        width: 140,
                        height: 30,
                        decoration: BoxDecoration(
                          color: _color,
                          borderRadius: BorderRadius.circular(8)
                        ),
                        child: Center(
                          child: Text(
                            _title,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.w600),
                          ),
                        ),
                      ),
                    ),
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text('I am overflowed'),
                  )],
                ),
              ),
            ),
          ),
        ],
      ),
    ],
  ),
);

Here is the issue that occuring.

Answer 1

In android we have three visibility state [ View.GONE, View.INVISIBLE, View.VISIBLE ] but in flutter we can achieve that with Opacity or Visibility Widget like this :

• View.INVISIBLE

Opacity(
  opacity: 0.0,
  child: const Text("you can't see me but I still take up space"),
)

• View.Gone

Visibility(
  visible: false,
  child: const Text("you can't see me and I don’t take any space"),
)

• View.VISIBLE

Visibility(
  visible: true,
  child: const Text("you can see me"),
)

or

Opacity(
  opacity: 1.0,
  child: const Text("you can see me"),
)

---

in your case you should do like this :

Visibility(
  visible: !_toggle,
  child : Padding(
       padding: const EdgeInsets.all(16.0),
       child: Text('I am overflowed'),
    )
 )

Answer 2

This should work(just replace your code "I am overflowed" with the padding with my code):

_width == MediaQuery.of(context).size.width ? Padding(
   padding: const EdgeInsets.all(16.0),
   child: Text('I am overflowed'),
) : Container()

Hope it helped

Answer 3

With Dart 2.3 you can use collection if in lists. Since your Padding with the Overflow-Text is within a Column the Padding is part of a list. If the expression inside the if is true, the Padding will be included otherwise not.

if(!_toogle)
  Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text('I am overflowed'),
  )

Here is the link to the documentation: https://dart.dev/guides/language/language-tour#lists Search for "collection if".