Start animation after hero animation in flutter
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
Filip Zymek
Android Developer in BLStream Poland. Love good music (every genre), sports, movies.
Updated on December 11, 2022Comments
-
Filip Zymek over 1 year
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.