animations
animationsis a Flutter library that provides a set of tools and components for creating animation effects. The core focus of this library is routing transition animation or page switching animation
Address
https://pub-web.flutter-io.cn/packages/animations
Install
flutter pub add animations
After reading the official documents and official examples, I was a little confused. I almost thought I found the wrong library. Fortunately, the library in flutter can be opened directly (ctrl + right mouse button) to view the source code
Click on: import 'package:animations/animations.dart';, you can see that the following files
modal.dartare not needed, and the other ones are the official animations provided to us. Take a look at the following, the following are the default configurations used, remember to import the following package
`import 'package:animations/animations.dart';`
fade_scale_transition
Center(
child: ElevatedButton(
onPressed: () {
showModal(
context: context,
// 配置
configuration: const FadeScaleTransitionConfiguration(),
builder: (context) {
return const Center(
child: SizedBox(
width: 250,
height: 250,
child: Material(
child: Center(
child: FlutterLogo(size: 250),
),
),
),
);
});
},
child: const Text("打开弹窗"),
));
fade_through_transition
This is a route switching animation
MaterialApp(
theme: ThemeData(
// 设置页面过渡主题
pageTransitionsTheme: const PageTransitionsTheme(builders: {
TargetPlatform.android: FadeThroughPageTransitionsBuilder(),
TargetPlatform.iOS: FadeThroughPageTransitionsBuilder(),
})),
// 路由
routes: {
'/': (BuildContext context) {
return Container(
color: Colors.red,
child: Center(
child: TextButton(
child: const Text('Push route'),
onPressed: () {
Navigator.of(context).pushNamed('/a');
},
),
),
);
},
'/a': (BuildContext context) {
return Container(
color: Colors.blue,
child: Center(
child: TextButton(
child: const Text('Pop route'),
onPressed: () {
Navigator.of(context).pop();
},
),
),
);
},
},
// home: YcHomePage(),
);
open_container
This is still very good
Center(
child: OpenContainer(
transitionDuration: const Duration(milliseconds: 500),
// 打开状态
openBuilder: (BuildContext context, VoidCallback _) {
return const SecondPage();
},
// 闭合状态
closedBuilder: (BuildContext context, VoidCallback openContainer) {
return GestureDetector(
onTap: openContainer,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: const Center(
child: Text(
'Tap to Open',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
);
},
));
class SecondPage extends StatelessWidget {
const SecondPage({
Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Page'),
),
body: const Center(
child: Text(
'Second Page',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
);
}
}
page_transition_switcher
Can be used to achieve smooth transition animations between different pages. It allows us to apply custom transition effects when switching pages, such as fading, sliding, zooming, etc.
// 创建一个PageTransitionSwitcher组件，并将需要切换的页面作为其子组件。
class SwitcherContainer extends StatefulWidget {
const SwitcherContainer({
Key? key}) : super(key: key);
_SwitcherContainerState createState() => _SwitcherContainerState();
}
class _SwitcherContainerState extends State<SwitcherContainer> {
int _pageIndex = -1;
Widget build(BuildContext context) {
return PageTransitionSwitcher(
// 过渡时间
duration: const Duration(milliseconds: 500),
// 过渡构建函数，还有其他的构建函数具体见源码
transitionBuilder: (child, animation, secondaryAnimation) {
return FadeThroughTransition(
animation: animation,
secondaryAnimation: secondaryAnimation,
child: child,
);
},
child: _getPage(_pageIndex),
);
}
Widget _getPage(int index) {
switch (index) {
case 0:
return const FirstPage();
default:
return Center(
child: ElevatedButton(
onPressed: () {
setState(() {
_pageIndex = 0;
});
},
child: const Text("跳转")),
);
}
}
}
class FirstPage extends StatelessWidget {
const FirstPage({
Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text(
'Second Page',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
);
}
}
The example written here is not suitable. Normally, it should be switched like a marquee.
shared_axis_transition
SharedAxisPageTransitionsBuilderis animationsa transition builder in the library that applies transition animations between pages that share axes. It provides three different transition types: SharedAxisTransitionType.scaled, SharedAxisTransitionType.horizontaland SharedAxisTransitionType.vertical, which represent transition effects in zoom, horizontal and vertical directions, respectively.
This is also a routing transition animation
class MyApp extends StatelessWidget {
//创建widget的唯一标识
const MyApp({
Key? key}) : super(key: key);
//重写build方法
Widget build(BuildContext context) {
// ChangeNotifierProvider 会返回一个 ChangeNotifier 对象，它允许消费者在 CounterState 对象发生变化时收到通知。
return MaterialApp(
home: const YcHomePage(),
theme: ThemeData(
pageTransitionsTheme: const PageTransitionsTheme(builders: {
TargetPlatform.android: SharedAxisPageTransitionsBuilder(
transitionType: SharedAxisTransitionType.scaled,
),
TargetPlatform.iOS: SharedAxisPageTransitionsBuilder(
transitionType: SharedAxisTransitionType.scaled,
),
})),
);
}
}
