1. Introduction to Hero animations
Hero Animation is a widget that helps us to create effects when switching screen. Below is an example of Hero Animations.
Hero Animation uses an icon now called “Hero” and when page transitions are activated, usually by clicking the icon, there will be a “fly” animation on the screen going to the next page. When the user navigates back to the previous page, the animation goes in the other direction and the icon returns to its original position.
We’ll be discussing not only the basic Hero Animations, but also the things we can customize about it. Let’s take a look at the basic effects first.
2. Create basic Hero Animation
Hero Animations is one of the easiest effects to do in Flutter and doesn’t require much setup. Looking at the example below, we can see that the same icon exists on both pages. All we need is to tell Flutter that the two are linked. We do this by wrapping a widget as an icon in the Hero widget.
1 2 3 4 5 6 7 8 9 | Hero( tag: "DemoTag", child: Icon( Icons.add, size: 70.0, ), ), |
We give each Hero widget a specific name. This is necessary because if we can have multiple Heroes on the same screen and each Hero wigdet will have different destinations.
Now the app knows that there is a widget Hero that wants to go to the next page. Now all we need to do is determine where the Hero Widget will fly.
All we need is to create a Hero Widget on the second screen with the same name as the hero widget on the first screen.
1 2 3 4 5 6 7 8 | Hero( tag: "DemoTag", child: Icon( Icons.add, size: 150.0, ), ), |
And here are the results we got
3. Customizing Hero Animations
Hero Animations allows us to customize parameters to create the animations we want. Let’s see how to do it.
3.1 Add placeholders
While the widget flies from screen to screen, there will be empty space at the destination. We can place placeholders in this position. Now let’s use CircularProgressIndicator as the placeholder.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | Hero( tag: "DemoTag", child: Icon( Icons.add, size: 150.0, ), placeholderBuilder: (context, widget) { return Container( height: 150.0, width: 150.0, child: CircularProgressIndicator(), ); }, ), |
And the results are obtained
3.2 Change widget hero
Flutter allows us to change widgets that actually move from one screen to another without changing the widgets that we setup from scratch on both screens. Below we will use the rocket icon while moving from screen to screen instead of the “+” icon. 
We use the hero animation’s ** flightShuttleBuilder ** property to do that.
1 2 3 4 5 6 7 8 9 10 11 12 | Hero( tag: "DemoTag", child: Icon( Icons.add, size: 150.0, ), flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) { return Icon(FontAwesomeIcons.rocket, size: 150.0,); }, ), |
The flightShuttleBuilder method takes 5 parameters and gives us the animation and the direction of the animation. Currently, the missile icon size remains at 150.0 for both directions. We can have different configurations for each direction by using the direction parameter of the method.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // push : từ màn hình thứ nhất về màn hình thứ hai. // pop: từ màn hình thứ hai quay lại màn hình thứ nhất. if(direction == HeroFlightDirection.push) { return Icon( FontAwesomeIcons.rocket, size: 150.0, ); } else if (direction == HeroFlightDirection.pop){ return Icon( FontAwesomeIcons.rocket, size: 70.0, ); } |
3.3 Create a reverse swipe effect similar to iOS using Hero Animation
By default, Hero Animation works when the user uses the back key, not with the back swipe action. However we can easily create this effect with Hero Animations
Use the back button:
Use back swipe:
To do this we use the Hero Widget’s transitionOnUserGestures parameter on both screens:
1 2 3 4 5 6 7 8 | Hero( tag: "DemoTag", child: Icon( Icons.add, ), transitionOnUserGestures: true, ), |
Refer
https://medium.com/flutter-community/a-deep-dive-into-hero-widgets-in-flutter-d34f441eb026