本文演示flutter創(chuàng)建 page1 和 page2 兩個頁面，并且頁面之間跳轉(zhuǎn)添加動畫
頁面入口
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
home: Page1(),
));
}
創(chuàng)建 Page1
class Page1 extends StatelessWidget {
const Page1({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const TextStyle textStyle = TextStyle(
fontSize: 24,
color: Colors.red
);
return Scaffold(
appBar: AppBar(
title: new Text("Page1", style: textStyle),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// 這里的 _createRoute 在下方創(chuàng)建
Navigator.of(context).push(_createRoute());
},
child: const Text('GoGoGO!'),
),
),
);
}
}
創(chuàng)建 router
Route _createRoute() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
// 開始坐標(biāo)
const begin = Offset(1, 0);
// 結(jié)束坐標(biāo)
const end = Offset.zero;
// 動畫曲線
const curve = Curves.ease;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(
position: animation.drive(tween),
child: child,
);
});
}
創(chuàng)建 Page2
class Page2 extends StatelessWidget {
const Page2({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Page2"),
),
body: const Center(
child: Text('page2'),
),
);
}
}
