Container filled with widgets beond hight and width without getting overflowed - flutter

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