Hero Transitions and Shared Element Motion
Coordinate Hero widgets and custom flight shuttles for polished screen transitions.
What Shared Element Motion Means
A Hero transition animates a single widget so it appears to fly from one screen to another during a route push or pop. Instead of the user losing track of an element across screens, the same visual object morphs in place.
- Think of a thumbnail in a list that expands into a full-screen detail image.
- Flutter computes the start and end rectangles and tweens the widget between them.
- This continuity is what designers call shared element motion.
In this lesson you will coordinate Hero widgets and customize the flight shuttle that actually renders during the in-between frames.
The Hero Widget Contract
To create a Hero animation you wrap the source and destination widgets in a Hero widget and give both the same tag. The tag is how Flutter pairs them across routes.
- Tags must be unique per screen but identical between the two screens.
- If two Heroes on the same screen share a tag, Flutter throws an assertion at navigation time.
Below, a product thumbnail on the list screen uses the product id as its tag.
Hero(
tag: 'product-${product.id}',
child: Image.network(
product.thumbnailUrl,
width: 80,
height: 80,
fit: BoxFit.cover,
),
)All lessons in this course
- Embedding Rive Assets and Controllers
- State Machines and Input-Driven Motion
- Hero Transitions and Shared Element Motion
- Staggered and Choreographed AnimationControllers