class HeroAnimationWidgetA extends StatefulWidget {
const HeroAnimationWidgetA({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<HeroAnimationWidgetA> createState() {
return HeroAnimationStateA();
}
}
class HeroAnimationStateA extends State<HeroAnimationWidgetA> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Container(
alignment: Alignment.topCenter,
child: Column(
children: <Widget>[
InkWell(
child: Hero(
tag: "avatar",
child: ClipOval(
child: Image.asset("images/avatar.png", width: 50),
),
),
onTap: () {
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) {
return FadeTransition(
opacity: animation,
child: Scaffold(
appBar: AppBar(title: const Text("原图")),
body: const HeroAnimationWidgetB(),
),
);
},
),
);
},
),
const Padding(
padding: EdgeInsets.only(top: 10),
child: Text("点击头像"),
),
],
),
),
);
}
}
class HeroAnimationWidgetB extends StatelessWidget {
const HeroAnimationWidgetB({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Hero(
tag: "avatar",
child: Image.asset("images/avatar.png"),
),
);
}
}
点击前效果
点击后效果
class HeroAnimationWidgetA extends StatefulWidget
阅读背景：
Flutter Hero动画
来源：互联网
分享到：
