どうも、ちょげ(@chogetarou)です。
画面遷移する際に、アニメーションをするには、どうしたらいいのでしょうか？
方法
画面遷移する際にアニメーションをするには、「PageRouteBuilder」を使います。
PageRouteBuilderの引数では、画面遷移の設定とアニメーションの設定をすることが出来ます。
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: TextButton(
onPressed: () => Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation1, animation2) => Page2(),
transitionsBuilder: (context, animation, animation2, child) {
const begin = Offset(0.0, 1.0);
const end = Offset.zero;
final tween = Tween(begin: begin, end: end);
final offsetAnimation = animation.drive(tween);
return SlideTransition(
position: offsetAnimation,
child: child,
);
},
transitionDuration: Duration(milliseconds: 2000),
),
),
child: Text('Push!'),
),
));
}
コメント