Flutter - Animate change on height when child of container renders

Question

I'm trying to recreate something like ExpansionTile but in a Card. When I click the card, its child renders and the card changes its height, so I want to animate that change.

I tried using AnimatedContainer and GlobalKey to know the final size of the card with its child rendered and then set the new height to AnimatedContainer but that didn't work.

Answer 1

In the end I just had to use AnimatedSize. It replicates exactly the animation that I want.

AnimatedSize(   vsync: this,   duration: Duration(milliseconds: 150),   curve: Curves.fastOutSlowIn,   child: Container(     child: Container(       child: !_isExpanded           ? null           : FadeTransition(opacity: animationFade, child: widget.child),     ),   ), ); 

Answer 2

You can use the AnimatedContainer for animations

class Animate extends StatefulWidget {   @override   _AnimateState createState() => _AnimateState(); }  class _AnimateState extends State<Animate> {   var height = 200.0;    @override   Widget build(BuildContext context) {     var size = MediaQuery.of(context).size;     return Scaffold(       body: Center(         child: AnimatedContainer(           color: Colors.amber,           duration: new Duration(milliseconds: 500),           height: height,         ),       ),       floatingActionButton: FloatingActionButton(         onPressed: () {           setState(() {             if (height == 200.0) {               height = 400.0;             } else {               height = 200.0;             }           });         },         child: Icon(Icons.settings),       ),     );   } }