Flutter动画对话框插件flutter_animated_dialog的使用
Flutter 动画对话框插件 flutter_animated_dialog 的使用
flutter_animated_dialog 是一个带有精美动画的新 Flutter 对话框库，包括滑动、淡入、旋转、大小变化等动画。对话框屏障包括屏幕顶部的状态栏，解决了默认对话框的问题。
示例
开始使用
在 pubspec.yaml 文件中添加依赖：
dependencies:
flutter_animated_dialog: ^2.0.1
然后导入库：
import 'package:flutter_animated_dialog/flutter_animated_dialog.dart';
参数说明
| 属性名称 | 描述 |
|---|---|
| context | BuildContext (非空，必填) |
| barrierDismissible | bool (默认为 false) |
| builder | WidgetBuilder (非空，必填) |
| animationType | DialogTransitionType (默认为 DialogTransitionType.fade) |
| curve | Curve (默认为 Curves.linear) |
| duration | Duration (默认为 const Duration(milliseconds: 400)) |
| alignment | AlignmentGeometry (默认为 Alignment.center) |
示例代码
以下是一个完整的示例代码，展示了如何使用 flutter_animated_dialog 创建不同类型的动画对话框：
import 'package:flutter/material.dart';
import 'package:flutter_animated_dialog/flutter_animated_dialog.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
[@override](/user/override)
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
bool showPerformance = false;
onSettingCallback() {
setState(() {
showPerformance = !showPerformance;
});
}
[@override](/user/override)
Widget build(BuildContext context) {
final appTitle = 'Animated Dialog Example';
return MaterialApp(
title: appTitle,
showPerformanceOverlay: showPerformance,
home: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return MyHomePage(
title: appTitle,
onSetting: onSettingCallback,
);
},
),
);
}
}
class MyHomePage extends StatefulWidget {
final String? title;
final VoidCallback? onSetting;
MyHomePage({Key? key, this.title, this.onSetting}) : super(key: key);
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String? selectedIndexText;
int? selectIdx;
String? singleSelectedIndexText;
int? selectIndex;
List<int>? selectedIndexes;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title ?? ''),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
widget.onSetting?.call();
},
)
],
),
body: Center(
child: ListView(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 20.0),
children: [
Container(
margin: EdgeInsets.only(bottom: 10.0),
padding: EdgeInsets.only(left: 15.0),
height: 35.0,
alignment: Alignment.centerLeft,
child: Text('General dialog'),
color: const Color(0xFFDDDDDD),
),
ListTile(
title: Text('Default'),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Fade"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.fade,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Slide from top"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.slideFromTop,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Slide from top and fade"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.slideFromTopFade,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Slide from bottom"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.slideFromBottom,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Slide from bottom and fade"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.slideFromBottomFade,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Slide from left"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.slideFromLeft,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Slide from left and fade"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.slideFromLeftFade,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Slide from right"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.slideFromRight,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Slide from right and fade"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.slideFromRightFade,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Scale"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.scale,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Fade scale"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.fadeScale,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Scale rotate"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.scaleRotate,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Rotate"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.rotate,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Fade rotate"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.fadeRotate,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Rotate 3D"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.rotate3D,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Size"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.size,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("Size fade"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.sizeFade,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("No animation"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'content',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.none,
curve: Curves.fastOutSlowIn,
duration: Duration(seconds: 1),
);
},
),
Divider(height: 0.5),
// Classic dialog widget
Container(
margin: EdgeInsets.only(bottom: 10.0, top: 50.0),
padding: EdgeInsets.only(left: 15.0),
height: 35.0,
alignment: Alignment.centerLeft,
child: Text('Classic dialog widget'),
color: const Color(0xFFDDDDDD),
),
ListTile(
title: Text("General dialog"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicGeneralDialogWidget(
titleText: 'Title',
contentText: 'This is general dialog.',
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.size,
curve: Curves.linear,
);
},
),
Divider(height: 0.5),
ListTile(
title: Text("List dialog ${selectedIndexText != null && selectedIndexText!.isNotEmpty ? '(index:' + selectedIndexText! + ')' : ''}"),
onTap: () async {
int? index = await showAnimatedDialog<int>(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicListDialogWidget<ListDataModel>(
titleText: 'Title',
dataList: List.generate(
2,
(index) {
return ListDataModel(name: 'Name$index', value: 'Value$index');
},
),
onPositiveClick: () {
Navigator.of(context).pop();
},
onNegativeClick: () {
Navigator.of(context).pop();
},
);
},
animationType: DialogTransitionType.size,
curve: Curves.linear,
);
selectIdx = index ?? selectIdx;
print('selectedIndex:$selectIdx');
setState(() {
this.selectedIndexText = '${selectIdx ?? ''}';
});
},
),
Divider(height: 0.5),
ListTile(
title: Text("List single select${singleSelectedIndexText != null && singleSelectedIndexText!.isNotEmpty ? '(index:' + singleSelectedIndexText! + ')' : ''}"),
onTap: () async {
int? index = await showAnimatedDialog<int>(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicListDialogWidget<ListDataModel>(
titleText: 'Title',
listType: ListType.singleSelect,
activeColor: Colors.red,
selectedIndex: selectIndex,
dataList: List.generate(
20,
(index) {
return ListDataModel(name: 'Name$index', value: 'Value$index');
},
),
);
},
animationType: DialogTransitionType.size,
curve: Curves.linear,
);
selectIndex = index ?? selectIndex;
print('selectedIndex:$selectIndex');
setState(() {
this.singleSelectedIndexText = '${selectIndex ?? ''}';
});
},
),
Divider(height: 0.5),
ListTile(
title: Text("List multiple select${multiSelectedIndexesText != null && multiSelectedIndexesText!.isNotEmpty ? '(index:' + multiSelectedIndexesText! + ')' : ''}"),
onTap: () async {
List<int>? indexes = await showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return ClassicListDialogWidget<ListDataModel>(
titleText: 'Title',
listType: ListType.multiSelect,
selectedIndexes: selectedIndexes,
activeColor: Colors.green,
dataList: List.generate(
20,
(index) {
return ListDataModel(name: 'Name$index', value: 'Value$index');
},
),
);
},
animationType: DialogTransitionType.size,
curve: Curves.linear,
);
selectedIndexes = indexes ?? selectedIndexes;
print('selectedIndex:${selectedIndexes?.toString()}');
setState(() {
this.multiSelectedIndexesText = selectedIndexes != null && selectedIndexes!.length > 0 ? selectedIndexes.toString() : '';
});
},
),
Divider(height: 0.5),
ListTile(
title: Text("Custom dialog"),
onTap: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return SingleChildScrollView(
child: ListBody(
children: [
Container(
padding: EdgeInsets.all(10.0),
width: 200.0,
child: FlutterLogo(size: 150.0),
)
],
));
},
animationType: DialogTransitionType.size,
curve: Curves.linear,
);
},
),
Divider(height: 0.5),
],
),
),
);
}
}
更多关于Flutter动画对话框插件flutter_animated_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter动画对话框插件flutter_animated_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，flutter_animated_dialog 是一个用于在 Flutter 应用中创建动画对话框的插件。它提供了一些预定义的动画效果，使得实现复杂的对话框动画变得更加简单。以下是一个使用 flutter_animated_dialog 插件的示例代码案例。
首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_animated_dialog 依赖：
dependencies:
flutter:
sdk: flutter
flutter_animated_dialog: ^x.y.z # 请替换为最新版本号
然后，运行 flutter pub get 命令来获取依赖。
接下来，你可以在你的 Flutter 应用中使用 FlutterAnimatedDialog。以下是一个简单的示例，展示如何显示一个带有动画效果的对话框：
import 'package:flutter/material.dart';
import 'package:flutter_animated_dialog/flutter_animated_dialog.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Animated Dialog Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Animated Dialog Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
showAnimatedDialog(
context: context,
barrierDismissible: true,
animationType: DialogTransitionType.slideFromTop,
builder: (BuildContext context) {
return AnimatedDialog(
title: 'Animated Dialog',
description: 'This is an animated dialog!',
buttonOkText: 'OK',
onOkButtonPressed: () {
Navigator.pop(context);
},
);
},
);
},
child: Text('Show Animated Dialog'),
),
),
);
}
}
在这个示例中，我们做了以下几件事：
- 导入
flutter_animated_dialog包。 - 创建一个简单的 Flutter 应用，其中包含一个按钮。
- 当按钮被点击时，调用
showAnimatedDialog方法显示一个动画对话框。 showAnimatedDialog方法接受多个参数，包括上下文 (context)、是否可以通过点击背景关闭对话框 (barrierDismissible)、动画类型 (animationType) 和对话框构建器 (builder)。builder参数返回一个AnimatedDialog，它接受标题、描述、确定按钮文本和点击确定按钮时的回调函数。
你可以根据需要调整动画类型 (DialogTransitionType) 和对话框内容。DialogTransitionType 提供了多种动画效果，如 slideFromTop、slideFromBottom、fadeIn 等。
这个示例展示了如何使用 flutter_animated_dialog 插件在 Flutter 应用中轻松实现动画对话框。希望这对你有所帮助！
