hero_animation

Description:

hero animation

HeroAnimation #
Hero-animates it's child from one layout position to another within the same Route.
Works in Scrollable.



How it works? #
Watch on Youtube
Read the article
Usage #
Hero animation is triggered when between two frames, the position of a HeroAnimation with the same tag changes.
Use key to allow the Flutter framework to detect HeroAnimation repositioning under the same tree node.
HeroAnimationScene provides flight configuration to underlying heroes, which must be HeroAnimation widgets ancestor.
Alignment alignment = Alignment.centerLeft;

@override
Widget build(BuildContext context) {

return HeroAnimationScene(
duration: const Duration(milliseconds: 500),
curve: Curves.easeIn,
child: GestureDetector(
onTap: () {
setState(() {
alignment = Alignment.centerRight;
});
},
child: Align(
alignment: alignment,
child: HeroAnimation.child(
tag: 'tag_0',
child: const Text('SOME TEXT'),
),
),
),
);
}
copied to clipboard
Repositioning within the same tree node. #



Flight trigger:
final _cups = ['0', '1', '2'];

onPressed: () {
setState(() {
_cups.shuffle()
});
},
copied to clipboard
Here
_cups are mapped to ValueKey and a tag;
@override
Widget build(BuildContext context) {
return Row(
children: _cups
.map(
(e) => Expanded(
child: HeroAnimation.child(
key: ValueKey(e),
tag: e,
child: Image.asset(
'assets/im_cup.png',
),
),
),
).toList(),
);
}
copied to clipboard
Repositioning between different tree nodes. #
HeroAnimation allows to rebuild it's child according to FlightState



Flight trigger:
_currentItem is shown on the left, _landedItems are shown in column on the right.
onPressed: () {
setState(() {
_landedItems.add(_currentItem);
_itemPointer++;
_currentItem = Item.values[_itemPointer];
});
}),
copied to clipboard
Here
Text change by landedItem hero is done by receiving flightEnded state for the first time.
Next hero animations within a column caused by adding new items are ignored by checking flightState.flightCount > 1.
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
..._landedItems.map(
(item)
=>
HeroAnimation.builder(
tag: item.name,
builder: (context, flightState, child) {
final firstFlightEnded = flightState.firstFlightEnded();

return AnimatedSwitcher(
child: Container(
alignment: Alignment.centerLeft,
key: ValueKey(firstFlightEnded),
child: Text(
item.getTitle(firstFlightEnded),
),
),
);
},
))
]);
}
copied to clipboard