1

I have an AnimatedContainer and as it's child, I have a Row containing a Text and an IconButton. After clicking some button, I am toggling the height of the Container between 0 and 100. When the Container height is zero, the IconButton is still visible (not the Text) and not clickable. enter image description here

enter image description here

 Widget _myAnimatedContainer() {
    return AnimatedContainer(
      curve: Curves.easeOut,
      alignment: Alignment.center,
      duration: Duration(milliseconds: 300),
      height: height,
      color: Colors.green,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Text(
            'Animated Container',
            style: TextStyle(fontSize: 20),
            overflow: TextOverflow.ellipsis,
          ),
          IconButton(icon: Icon(Icons.favorite_border), onPressed: () {},)
        ],
      ),
    );
  }

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  double height = 100;
  bool isExpanded = false;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            _myAnimatedContainer(),
            SizedBox(height: 20,),
            RaisedButton(
              child: Text('Expand'),
              onPressed: () {
                setState(() {
                  isExpanded = !isExpanded;
                  height = isExpanded ? 100 : 0;
                });
              },
            ),
          ],
        ),
    );
  }

Please suggest how to solve this issue.

B.Ahmad
  • 107
  • 1
  • 8

1 Answers1

1

Add the if condition:

if (height > 0)
     IconButton(icon: Icon(Icons.favorite_border), onPressed: () {},)

You might want to use a different value from 0 (like 10) to remove the icon

Antonin GAVREL
  • 9,682
  • 8
  • 54
  • 81
  • Thanks, it solves my problem, but i wonder why the IconButton is still visible when the container height is zero, because the Text is working fine as expected. – B.Ahmad Jun 17 '20 at 06:52
  • You're welcome Ahmad! They are different type of widgets so their implementation in the flutter library also differs. You can raise an issue on their github https://github.com/flutter/flutter if you think that this is an important missing feature, probably many other developers encountered the same problem already. – Antonin GAVREL Jun 17 '20 at 17:09