Hero animations are implemented using two Hero
widgets: one describing the widget in the source route,
and another describing the widget in the destination route.
From the user’s point of view, the hero appears to be shared, and
only the programmer needs to understand this implementation detail.
Hero animation code has the following structure:

Define a starting Hero widget, referred to as the source
hero. The hero specifies its graphical representation
(typically an image), and an identifying tag, and is in
the currently displayed widget tree as defined by the source route.

Define an ending Hero widget, referred to as the destination hero.
This hero also specifies its graphical representation,
and the same tag as the source hero.
It’s essential that both hero widgets are created with
the same tag, typically an object that represents the
underlying data. For best results, the heroes should have
virtually identical widget trees.

Create a route that contains the destination hero.
The destination route defines the widget tree that exists
at the end of the animation.