Flutter页面过渡动画插件animated_page_transition的使用
Flutter页面过渡动画插件animated_page_transition的使用
这个包用于页面过渡动画。通过这个包,你可以在你的应用中实现平滑的页面过渡效果。请查看下面的视频!
使用
在 pubspec.yaml
文件中添加 animation_page_transition
依赖。
然后在实现文件中导入该包:
import 'package:animated_page_transition/animated_page_transition.dart';
你可以非常容易地实现动画页面过渡。
首先,将按钮包裹在 [PageTransitionButton]
小部件中,示例代码如下:
要使用 [PageTransitionButton]
,你需要将 [TickerProviderStateMixin]
添加到你的小部件中。
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
[@override](/user/override)
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: PageTransitionButton(
vsync: this,
child: Container(
height: 120,
width: 120,
decoration: BoxDecoration(
color: const Color(0xFFFF9735),
borderRadius: BorderRadius.circular(10),
),
),
nextPage: const SecondScreen(),
),
),
);
}
}
然后,在第二个屏幕的 Scaffold
上包裹 [PageTransitionReceiver]
小部件,如下所示:
class SecondScreen extends StatelessWidget {
const SecondScreen({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return PageTransitionReceiver(
scaffold: const Scaffold(
backgroundColor: Color(0xFFFF9735),
),
);
}
}
现在你已经准备好了!享受编码的乐趣吧!
完整示例Demo
以下是完整的示例代码:
import 'package:flutter/material.dart';
import 'package:animated_page_transition/animated_page_transition.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Animated Page Transition',
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
[@override](/user/override)
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: PageTransitionButton(
vsync: this,
child: Container(
height: 120,
width: 120,
decoration: BoxDecoration(
color: const Color(0xFFFF9735),
borderRadius: BorderRadius.circular(10),
),
),
nextPage: const SecondScreen(),
),
),
);
}
}
class SecondScreen extends StatelessWidget {
const SecondScreen({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return PageTransitionReceiver(
scaffold: const Scaffold(
backgroundColor: Color(0xFFFF9735),
),
);
}
}
更多关于Flutter页面过渡动画插件animated_page_transition的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter页面过渡动画插件animated_page_transition的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter中使用animated_page_transition
插件来实现页面过渡动画的示例代码。
首先,确保你已经在pubspec.yaml
文件中添加了animated_page_transition
依赖:
dependencies:
flutter:
sdk: flutter
animated_page_transition: ^2.0.1 # 请检查最新版本号
然后运行flutter pub get
来安装依赖。
接下来,在你的Flutter项目中,你可以创建一个简单的应用来演示如何使用animated_page_transition
。以下是一个完整的示例代码:
import 'package:flutter/material.dart';
import 'package:animated_page_transition/animated_page_transition.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animated Page Transition Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated Page Transition Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
PageTransition(
type: PageTransitionType.fade, // 你可以尝试其他类型,比如slide, scale, rightToLeft, etc.
child: SecondScreen(),
),
);
},
child: Text('Go to Second Screen'),
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go Back'),
),
),
);
}
}
// 自定义PageTransition包装器
class PageTransition extends StatelessWidget {
final PageTransitionType type;
final Widget child;
const PageTransition({Key key, @required this.type, @required this.child})
: super(key: key);
@override
Widget build(BuildContext context) {
return AnimatedPageTransition(
child: child,
duration: Duration(milliseconds: 500), // 动画持续时间
type: type,
curve: Curves.easeInOut, // 动画曲线
);
}
}
enum PageTransitionType {
fade,
slide,
scale,
rightToLeft,
leftToRight,
topToBottom,
bottomToTop,
}
extension PageTransitionTypeExtension on PageTransitionType {
PageTransitionType get animationType {
switch (this) {
case PageTransitionType.fade:
return PageTransitionType.fade;
case PageTransitionType.slide:
return PageTransitionType.slide;
case PageTransitionType.scale:
return PageTransitionType.scale;
case PageTransitionType.rightToLeft:
return PageTransitionType.rightToLeft;
case PageTransitionType.leftToRight:
return PageTransitionType.leftToRight;
case PageTransitionType.topToBottom:
return PageTransitionType.topToBottom;
case PageTransitionType.bottomToTop:
return PageTransitionType.bottomToTop;
default:
return PageTransitionType.fade;
}
}
AnimatedPageTransitionType toAnimatedPageTransitionType() {
switch (this) {
case PageTransitionType.fade:
return AnimatedPageTransitionType.fade;
case PageTransitionType.slide:
return AnimatedPageTransitionType.slide;
case PageTransitionType.scale:
return AnimatedPageTransitionType.scale;
case PageTransitionType.rightToLeft:
return AnimatedPageTransitionType.rightToLeft;
case PageTransitionType.leftToRight:
return AnimatedPageTransitionType.leftToRight;
case PageTransitionType.topToBottom:
return AnimatedPageTransitionType.topToBottom;
case PageTransitionType.bottomToTop:
return AnimatedPageTransitionType.bottomToTop;
default:
return AnimatedPageTransitionType.fade;
}
}
}
注意:
-
AnimatedPageTransition
插件的type
参数接受的是AnimatedPageTransitionType
枚举类型,而不是自定义的PageTransitionType
。为了简单起见,上面的示例代码中包含了一个将自定义枚举转换为AnimatedPageTransitionType
的扩展方法,但在实际使用中,你可以直接传递AnimatedPageTransitionType
枚举值。 -
在实际代码中,你可能不需要自定义的
PageTransition
包装器和PageTransitionType
枚举,直接传递AnimatedPageTransitionType
枚举值给AnimatedPageTransition
的type
参数即可。
为了简化,你可以直接使用如下方式:
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (_, __, ___) => SecondScreen(),
transitionsBuilder: (_, Animation<double> animation, __, Widget child) {
return AnimatedPageTransition(
child: child,
duration: Duration(milliseconds: 500),
type: AnimatedPageTransitionType.fade, // 或其他类型
curve: Curves.easeInOut,
);
},
),
);
这样你就可以轻松地在Flutter应用中实现页面过渡动画了。