Flutter - Animate change on height when child of container renders

Diego Francisco picture Diego Francisco · Dec 13, 2018 · Viewed 14.7k times · Source

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

Diego Francisco picture Diego Francisco · Dec 18, 2018

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),
    ),
  ),
);