Flutter Hero Animations for Smooth Screen Transitions

Flutter's Hero widget animates a shared element from one screen to another. Done well, it makes the app feel alive and intentional. Done poorly, it looks like a UI bug. The difference is mostly in three details.

What Hero does

Wrap a widget in Hero on screen A and another Hero with the same tag on screen B. When you push from A to B, Flutter animates the widget from its position on A to its position on B. The transition handles itself.

dart// Both screens
Hero(
  tag: 'product-${product.id}',
  child: Image.network(product.imageUrl),
)

Use unique tags per item

If two visible widgets share a tag, Flutter logs a warning and picks one arbitrarily. In a list, derive the tag from the item ID (not the index). This keeps the animation correct when the list reorders.

Match the visual cleanly

The source and destination should look mostly the same — a square thumbnail expanding to a full image works because both are rectangles with the same content. A square button morphing into a paragraph of text looks broken because the content is unrelated.

When the destination has different padding, borders, or shape, wrap the Hero in a Material widget so the transition handles the visual difference cleanly. Otherwise the borders flicker mid-flight.

When to skip Hero

If the destination screen is completely different from the source, no animation will smooth that. A regular page transition is more honest. Heros are for shared elements that genuinely persist — not for trying to make any transition fancy.