Start animation after hero animation in flutter

Question

I am building gallery app that displays items in list/grid and upon press it transitions to detail view. I am using hero animation for main image element and I want to animate parts of detail view after hero transition is done (fade in fab, slide in texts etc).

Is there any property or callback that I can use to listen for hero animation updates and start my animation in smth like onAnimationEnd?

I know that I can "hack" the solution and start my fade in animation 300ms (this is default duration of hero animation as far as I remember) after view is pushed to screen but it does not feel right.

Just start the animation in the initState() of the widget you'll push in. — Son of Stackoverflow
It is a little bit less of a hack if you delay the animation by ModalRoute.of(context).transitionDuration. At least it will be delay by the right amount of time. — spkersten

Nadeem Siddique Nadeem Siddique · Accepted Answer · 2019-05-10T15:55:06

Have you tried using a Future?

double opacity = 0;

Future < void > showAfter() async {
  await Future.delayed(Duration(seconds: 3), () {
    print('delay completed');
  });
  setState(() {
    opacity = 1;
  });
}

Count the amount of time the Hero animation and set it to delay of Duration.

Call the function inside initState()

Then you can wrap your widget inside a AnimatedOpacity widget like this, till delay time everything will be there they just be hidden and once it's over it will appear like a fadein.

AnimatedOpacity(
  duration: Duration(milliseconds: 300),
  opacity: opacity,
  child: Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: < Widget > [
        Text("Hello World"),
      ],
    ),
  ),
),

You can different curves and durations

Start animation after hero animation in flutter

1 Answers