Flutter动画切换插件animated_switcher_wrapper的使用
Flutter动画切换插件animated_switcher_wrapper的使用
描述
此包是AnimatedSwitcher的基本包装，提供了一些自定义动画。它提供了一种方便的方式来增强您的Flutter应用程序中的视觉过渡。
特性
- 提供AnimatedSwitcher的自定义动画
- 易于与现有代码库集成
- 借助平滑过渡改善用户体验
入门指南
要开始使用此包，请确保已安装Flutter。然后可以按照以下步骤操作：
- 将包添加到
pubspec.yaml文件中。 - 导入此包所需的组件。
- 使用提供的动画来增强应用的过渡效果。
有关更详细的说明和示例，请查看此存储库中的/example文件夹。
使用方法
以下是一个完整的示例，展示了如何在Flutter应用中使用animated_switcher_wrapper插件。
import 'package:animated_switcher_wrapper/animated_switcher_wrapper.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const AnimatedSwitcherWrapperExample(),
);
}
}
class AnimatedSwitcherWrapperExample extends StatefulWidget {
const AnimatedSwitcherWrapperExample({super.key});
[@override](/user/override)
State<AnimatedSwitcherWrapperExample> createState() => _AnimatedSwitcherWrapperExampleState();
}
class _AnimatedSwitcherWrapperExampleState extends State<AnimatedSwitcherWrapperExample> {
var show = true;
void toggle() {
setState(() {
show = !show;
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: toggle,
child: const Text('Toggle'),
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: AnimatedSwitcherScaleFade(
duration: Durations.long1,
child: show
? Material(
color: Colors.blue[300],
child: const Align(child: Text('Scale Fade')),
)
: const SizedBox(),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: AnimatedSwitcherSizeFade(
duration: Durations.long1,
child: show
? Material(
color: Colors.blue[100],
child: const Align(child: Text('Size Fade')),
)
: const SizedBox(),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: AnimatedSwitcherSlideFade(
duration: Durations.long1,
child: show
? Material(
color: Colors.blue[200],
child: const Align(child: Text('Slide Fade')),
)
: const SizedBox(),
),
),
),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: AnimatedSwitcherScaleFade(
duration: Durations.long1,
child: show
? Material(
key: ValueKey(Colors.blue[300]),
color: Colors.blue[300],
child: const Align(child: Text('Scale Fade')),
)
: Material(
key: ValueKey(Colors.green[300]),
color: Colors.green[300],
child: const Align(child: Text('Scale Fade')),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: AnimatedSwitcherSizeFade(
duration: Durations.long1,
child: show
? Material(
key: ValueKey(Colors.blue[100]),
color: Colors.blue[100],
child: const Align(child: Text('Size Fade')),
)
: Material(
key: ValueKey(Colors.green[100]),
color: Colors.green[100],
child: const Align(child: Text('Size Fade')),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: AnimatedSwitcherSlideFade(
duration: Durations.long1,
child: show
? Material(
key: ValueKey(Colors.blue[200]),
color: Colors.blue[200],
child: const Align(child: Text('Slide Fade')),
)
: Material(
key: ValueKey(Colors.green[200]),
color: Colors.green[200],
child: const Align(child: Text('Slide Fade')),
),
),
),
),
],
),
),
],
),
);
}
}
1 回复
更多关于Flutter动画切换插件animated_switcher_wrapper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
animated_switcher_wrapper 是一个 Flutter 插件，用于在 Flutter 应用中实现平滑的动画切换效果。它可以帮助你在不同的小部件之间进行动画过渡，例如淡入淡出、缩放、滑动等效果。
安装
首先，你需要在 pubspec.yaml 文件中添加依赖：
dependencies:
flutter:
sdk: flutter
animated_switcher_wrapper: ^1.0.0 # 请检查最新版本然后运行 flutter pub get 来安装依赖。
基本用法
AnimatedSwitcherWrapper 的核心思想是通过 child 属性的变化来触发动画。当 child 变化时，AnimatedSwitcherWrapper 会自动应用指定的动画效果。
1. 简单示例
import 'package:flutter/material.dart';
import 'package:animated_switcher_wrapper/animated_switcher_wrapper.dart';
class MyAnimatedSwitcherPage extends StatefulWidget {
@override
_MyAnimatedSwitcherPageState createState() => _MyAnimatedSwitcherPageState();
}
class _MyAnimatedSwitcherPageState extends State<MyAnimatedSwitcherPage> {
bool _toggle = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimatedSwitcherWrapper Example'),
),
body: Center(
child: AnimatedSwitcherWrapper(
child: _toggle
? Container(
key: ValueKey('1'),
width: 100,
height: 100,
color: Colors.blue,
child: Center(child: Text('Box 1')),
)
: Container(
key: ValueKey('2'),
width: 150,
height: 150,
color: Colors.red,
child: Center(child: Text('Box 2')),
),
duration: Duration(milliseconds: 500),
transitionBuilder: (Widget child, Animation<double> animation) {
return ScaleTransition(scale: animation, child: child);
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_toggle = !_toggle;
});
},
child: Icon(Icons.swap_horiz),
),
);
}
}在这个示例中，我们使用 AnimatedSwitcherWrapper 来在两个不同的 Container 之间进行动画切换。当用户点击 FloatingActionButton 时，_toggle 状态会发生变化，从而触发动画。
2. 自定义动画
AnimatedSwitcherWrapper 允许你通过 transitionBuilder 参数来自定义动画效果。你可以使用 Flutter 提供的 ScaleTransition、FadeTransition、SlideTransition 等动画组件。
例如，使用 FadeTransition 实现淡入淡出效果：
transitionBuilder: (Widget child, Animation<double> animation) {
return FadeTransition(opacity: animation, child: child);
},或者使用 SlideTransition 实现滑动效果：
transitionBuilder: (Widget child, Animation<double> animation) {
return SlideTransition(
position: Tween<Offset>(
begin: Offset(1.0, 0.0),
end: Offset.zero,
).animate(animation),
child: child,
);
},