Flutter - Radial Hero Animation

A Radial transformation means turning a circular shape into a square shape. In Radial Hero animation the same is done with a Hero. In Flutter, a Hero Widget is used to create a hero animation. A hero in this context refers to a widget that moves in between screens. This is one of the most fundamental types of animation used in the application, especially if the app deals with media like images. Simply put, a hero animation is when a hero flies from one screen to another.

The following process occurs while creating a radial hero Animation:

• The RadialExpansion Widget is used to wrap the hero.
• The size of the hero changes as it flies through the routes and the hero adopts the size of the child.
• Two overlapping clips form the RadialExpansion animation.
• The PageRouteBuilder is used to build the destination of the hero.
• All gestures are handled by the InkWell widget.

The following image shows the radial transformation of a hero at time = 0 to time =1.

The RadialExpansion widget works in the following depicted way:

Now let's build a simple app that has three heroes that make a radial transformation when clicked on them. The heroes will be stores in the following folder of the flutter app:

flutter_app/assets/images/.....

Make sure to add the dependencies in the pubspec.yaml file as shown below:

Now let's build the main.dart file:

main.dart:

Output: