A Deep Dive Into Hero Widgets in Flutter

A tutorial to the power of Hero widgets in Flutter

This article is the fourth article in a series of articles meant for an in-detail study of Flutter widgets. After covering ListViews, TextFields and FloatingActionButtons in depth, we will now go into the Hero widget in Flutter.

Introduction to Hero Animations

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.

Hero Animations take an element like an icon which is now called a “Hero” and once the page transition is triggered, usually by clicking on the icon, the hero “flies” to the next page. When the user navigates back to the earlier page, the animation goes in the other direction and the icon goes back to its place.

We’ll discuss not only basic hero animations but things we can customize about it. Let’s see the basics first.

Creating a Basic Hero Animation

Hero animations are probably one of the easiest animations to do in Flutter and don’t require much setup. Taking a look at the example above, we can see that the same app icon widget exists on both pages. All we need is a way to tell Flutter that both of them are linked.

We do this by wrapping an element like an icon in a Hero widget.

Hero( tag: "DemoTag", child: Icon( Icons.add, size: 70.0, ),),

We supply it a tag to give this specific hero a name. This is necessary because if we have multiple heroes on the same page, each hero knows where to fly to.

Now the app knows that there is a hero widget that wants to fly to the next page. Now all we need is a place to fly to.

All we need is a Hero widget on the second page with the same tag.

Hero( tag: "DemoTag", child: Icon( Icons.add, size: 150.0, ),),

And this results in:

The Hero animation created with the code above

Customizing Hero Animations

The Hero widget allows us to customize aspects of the animation. Let’s explore a few possibilities.

Adding placeholders

After the widget flies off the place it used to be in and before the widget arrives at the destination, there is empty space at the destination. We can add a placeholder to this location.