A widget that marks its child as being a candidate for hero animations.
During a page transition (see Navigator), if a particular feature (e.g. a picture or heading) appears on both pages, it can be helpful for orienting the user if the feature appears to physically move from one page to the other. Such an animation is called a hero animation.
To label a widget as such a feature, wrap it in a Hero widget. When a navigation happens, the Hero widgets on each page are collected up. For each pair of Hero widgets that have the same tag, a hero animation is triggered.
Hero animations are managed by a HeroController.
If a Hero is already in flight when another navigation occurs, then it will continue to the next page.
A particular page must not have more than one Hero for each tag.
Discussion
Heroes are the parts of an application's screen-to-screen transitions where a widget from one screen shifts to a position on the other. For example, album art from a list of albums growing to become the centerpiece of the album's details view. In this context, a screen is a ModalRoute in a Navigator.
To get this effect, all you have to do is wrap each hero on each route with a Hero widget, and give each hero a tag. The tag must be unique within the current route's widget subtree, and must match the tag of a Hero in the target route. When the app transitions from one route to another, each hero is animated to its new location.
Heroes and the Navigator's Overlay's Stack must be axis-aligned for all this to work. The top left and bottom right coordinates of each animated Hero will be converted to global coordinates and then from there converted to that Stack's coordinate space, and the entire Hero subtree will, for the duration of the animation, be lifted out of its original place, and positioned on that stack. If the Hero isn't axis aligned, this is going to fail in a rather ugly fashion. Don't rotate your heroes!
To make the animations look good, it's critical that the widget tree for the hero in both locations be essentially identical. The widget of the target is used to do the transition: when going from route A to route B, route B's hero's widget is placed over route A's hero's widget, and route A's hero is hidden. Then the widget is animated to route B's hero's position, and then the widget is inserted into route B. When going back from B to A, route A's hero's widget is placed over where route B's hero's widget was, and then the animation goes the other way.
- Inheritance
- Object
- Widget
- StatefulWidget
- Hero
Constructors
Properties
- alwaysAnimate → bool
-
If true, the hero will always animate, even if it has no matching hero to animate to or from. If it has no target, it will imply a target at the same position with zero width and height and with turns set to zero. This will typically cause it to shrink and spin.
read-only - child → Widget
-
The widget below this widget in the tree.
read-only - tag → Object
-
The identifier for this particular hero. If the tag of this hero matches the tag of a hero on the other page during a page transition, then a hero animation will be triggered.
read-only - turns → int
-
The relative number of full rotations that the hero is conceptually at.
read-only - hashCode → int
-
Get a hash code for this object.
read-only, inherited - key → Key
-
Controls how one widget replaces another widget in the tree.
read-only, inherited - runtimeType → Type
-
A representation of the runtime type of the object.
read-only, inherited
Operators
-
operator ==(
other) → bool -
The equality operator.
inherited
Methods
-
createState(
) → _HeroState -
Creates the mutable state for this widget at a given location in the tree.
-
createElement(
) → StatefulElement -
Creates a StatefulElement to manage this widget's location in the tree.
inherited -
debugFillDescription(
List<String> description) → void -
Add additional information to the given description for use by toString.
inherited -
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a non-existent method or property is accessed.
inherited -
toString(
) → String -
Returns a string representation of this object.
inherited -
toStringShort(
) → String -
A short, textual description of this widget.
inherited