假设我有两个页面,第1页和第2页包含一个英雄。在Page2中,我想在Hero动画完成后开始Widget动画。
是否可以通过Callback在第2页中获得有关Hero动画状态的通知?
到目前为止,我发现的唯一解决方法是向Widget动画添加延迟,以避免它在Hero动画完成之前开始:
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) => Container(
child: Hero(
tag: "hero-tag",
child: IconButton(
icon: Icon(Icons.person),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => Page2(),
));
}),
),
);
}
class Page2 extends StatefulWidget {
@override
_Page2State createState() => _Page2State();
}
class _Page2State extends State<Page2> with TickerProviderStateMixin {
AnimationController _controller;
Animation _fabAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 400), vsync: this);
_fabAnimation = Tween<double>(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(
parent: _controller,
// delay to wait for hero animation to end
curve: Interval(
0.300,
1.000,
curve: Curves.ease,
),
),
);
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
Hero(
tag: "hero-tag",
child: Icon(Icons.person),
),
ScaleTransition(
scale: _fabAnimation,
child: FloatingActionButton(
child: Icon(
Icons.camera_alt,
),
onPressed: () {},
),
),
],
),
);
}
}