Before moving to the sections specific to
standard
or radial hero animations,
read basic structure of a hero animation
to learn how to structure hero animation code,
and behind the scenes to understand
how Flutter performs a hero animation.

Basic structure of a hero animation

What's the point?

Use two hero widgets in different routes but with matching tags to
implement the animation.

The Navigator manages a stack containing the app’s routes.

Pushing a route on or popping a route from the Navigator’s stack
triggers the animation.

The Flutter framework calculates a rectangle tween,
RectTween that defines the hero’s boundary
as it flies from the source to the destination route.
During its flight, the hero is moved to
an application overlay, so that it appears on top of both routes.

Terminology:
  If the concept of tweens or tweening is new to you,
  see the Animations in Flutter tutorial.