How to do hero animation in Flutter?

The animation is a vital part of the modern app and web UX. This tutorial shows a simple implementation of hero animation. Here we create 2 widgets page1 and page2. Then we navigate from page1 to page2 and backward to show how hero animation is done.

Alright Let’s start coding

Page 1

Hero animation can be done with any widget containing an image. We just need to wrap the widget containing an image with a hero animation. Here we wrap the circular avatar widget with Hero widget. The main thing to note is the value of the “tag” attribute. In our case, we have given the value of tag as “profile-image”. This should the same for the hero widget used on page 2 as well.

We have also wrapped the entire widget inside a GestureDetector which will capture the tap event and navigate page2 as shown in the code.

Page 2

On page 2 we wrap the container with a hero widget having a tag with value “profile-image” which is the same as page 1.