Animate Widgets Across Screens-Hero Animation In Flutter

As We all know Animations in apps give user a smooth and engaging experience which attracts the user to use the app. In flutter where there are no boundaries to animation, Hero animation is one of them which brings sharing elements in screens and animate like charm.

Hero Animations in flutter is just amazing and as easy to use as a simple widget in flutter.

A Hero Animation in one sentence is simply an element of one screen “flying” to the next when the app goes to the next page.

As you can see in the demo video above, Its amazing to see how hero animations work and engage users while navigating between screens.

Basic Hero Animation

Hero animation is one of the easiest animations to achieve in flutter which doesn’t require much steps and headache to go through.

For this to achieve, All you need is just to wrap your common widget in both screens with Hero Widget and provide a unique tag on both ends. As in video above, I am using an image to fly between screens, so I will wrap the image on both screens with Hero Widget like this:

Hero(
  tag: product.productName,
  child: Image.asset(product.image)),

Here I am using product name as a tag because it will be unique for every product. This is the code on both of screens with different size of image to make in feel growing big when screen changed.

Note: Tag should be always unique because same tag can’t be used for two elements in same screen and it will through an error.

Customising Hero Animations

We can add placeHolderBuilder Hero animation to make it look more attractive.

Place Holder Builder:

Hero(
  placeholderBuilder: (context, widget) {
      return Container(
        height: 150.0,
        width: 150.0,
        child: CircularProgressIndicator(),
      );
    },
  tag: product.productName,
  child: Image.asset(product.image)),

We can provide any of flutter widget from widget library and make our own custom widget where sky is the limit.

Changing the Hero widget

Flutter allows us to change the widget which actually flies from one page to the other without changing the widgets on the two pages.

Lets use an icon instead of image to be shown when navigation We do this using the flightShuttleBuilder parameter:

Hero(
  flightShuttleBuilder: (flightContext, animation, direction,
      fromContext, toContext) {
    return Icon(FontAwesomeIcons.rocket, size: 150.0,);
  },
  tag: product.productName,
  child: Image.asset(product.image)),

The flightShuttleBuilder method has 5 parameters and gives us the animation as well as the direction of the animation.

As we have direction of animation, we can even provide different values for push and pop operations.

f(direction == HeroFlightDirection.push) {
  return Icon(
    FontAwesomeIcons.rocket,
    size: 150.0,
  );
} else if (direction == HeroFlightDirection.pop){
  return Icon(
    FontAwesomeIcons.rocket,
    size: 70.0,
  );
}

Making Hero animations work with iOS back swipe gestures

By default, hero animations work when the back button is pressed on iOS but they don’t work on back swipe.

To solve this, simply set transitionOnUserGestures to true on both Hero widgets. This is false by default.

Hero(
  flightShuttleBuilder: (flightContext, animation, direction,
      fromContext, toContext) {
    return Icon(FontAwesomeIcons.rocket, size: 150.0,);
  },
  transitionOnUserGestures: true,
  tag: product.productName,
  child: Image.asset(product.image)),

This will trigger hero animations on swipe gestures as well.

That’s it for this article! I hope you enjoyed it, and leave a few claps if you did. Follow me for more Flutter articles and comment for any feedback you might have about this article.

Follow me github to get the sample codes.

Linkedin