How to animate AnimatedIcon with Hero? - flutter

Question

I want to use Hero to animate the AnimatedIcon in the process of route navigation. What should I do?
_controller = AnimationController(
duration: Duration(microseconds: 1000), value: 1.0, vsync: this);
void _toggleFrontLayer() {
final AnimationStatus status = _controller.status;
final bool isOpen = status == AnimationStatus.completed ||
status == AnimationStatus.forward;
_controller.fling(velocity: isOpen ? -2.0 : 2.0);
}
leading: Hero(
child: Material(
color: Colors.transparent,
child: IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,
progress: _controller,
),
onPressed: _toggleFrontLayer,
),
),
tag: "leading",
),
leading: Hero(
child: Material(
color: Colors.transparent,
child: IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,
progress: _controller,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
tag: "leading",
),
The appbar looks like this:now
And the AnimatedIcon's animation looks like this:AnimatedIcon
What I want is showing the animation of the AnimatedIcon in the process of route navigation instead of fade in and fade out or other animations.

Answer 1

First things first. If you don't have a Material ancestor widget, you're probably getting an exception while you're routing between screens. To prevent it, you can wrap your IconButton in a Material with the property color: Colors.transparent.
Second, there is nothing wrong with using Hero to animate the leading button between screens, however, you won't notice a difference since the position is exactly the same and there is nothing to animate from-to. The result is something like this:
However, if you actually change the position of the IconButton between screens, you will get the Hero animation as expected.