How can I use animation/animation not running during a Hero transition in Flutter? How can I use animation/animation not running during a Hero transition in Flutter? dart dart

How can I use animation/animation not running during a Hero transition in Flutter?


As it turns out, flightShuttleBuilder only emits values at the start and end of the transition instead of throughout the animation. Capturing from this issue on GitHub, it is apparently expected behavior.

The workaround is to create your own transition which extends from AnimatedWidget; that will emit values normally and can be used in the flightShuttleBuilder:

class FlipcardTransition extends AnimatedWidget {  final Animation<double> flipAnim;  final Widget child;  FlipcardTransition({@required this.flipAnim, @required this.child})      : assert(flipAnim != null),        assert(child != null),        super(listenable: flipAnim);  @override  Widget build(BuildContext context) {    return Transform(      transform: Matrix4.identity()        ..rotateY(-pi * flipAnim.value),      alignment: FractionalOffset.center,      child: child,    );  }}...flightShuttleBuilder: (BuildContext flightContext,  Animation<double> animation,  HeroFlightDirection flightDirection,  BuildContext fromHeroContext,  BuildContext toHeroContext,) {    final Hero toHero = toHeroContext.widget;    return FlipcardTransition(      flipAnim: animation,      child: toHero,    );},


As Matt said, the default behavior is only emitting start and end value, so we should listen the animation to get the full animatable widget. Here is an example:

Hero(  tag: "YourHeroTag",  flightShuttleBuilder: (BuildContext flightContext,    Animation<double> animation,    HeroFlightDirection flightDirection,    BuildContext fromHeroContext,    BuildContext toHeroContext,) {      return AnimatedBuilder(        animation: animation,        builder: (context, value) {          return Container(            color: Color.lerp(Colors.white, Colors.black87, animation.value),          );        },      );  },  child: Material( // Wrap in Material to prevent missing theme, mediaquery, ... features....    // ...  ))

It's recommended to wrap in Material widget to prevent unexpected missing style.