Flutter自定义对话框插件awesome_dialog的使用
Flutter自定义对话框插件awesome_dialog的使用
awesome_dialog 是一个Flutter包项目，用于创建简单而精美的对话框。本文将详细介绍如何使用 awesome_dialog 插件，并提供完整的示例代码。
使用方法
要使用此包，请在 pubspec.yaml 文件中添加 awesome_dialog 作为依赖项，并在 Dart 文件中导入以下内容：
import 'package:awesome_dialog/awesome_dialog.dart';
示例代码
以下是 awesome_dialog 的完整示例代码，展示了不同类型的对话框及其用法。
完整示例代码
import 'package:awesome_dialog/awesome_dialog.dart';
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Awesome Dialog Example',
theme: ThemeData.dark(),
initialRoute: '/',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Awesome Dialog Example'),
),
body: Center(
child: Container(
padding: const EdgeInsets.all(16),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
ElevatedButton(
onPressed: () {
AwesomeDialog(
context: context,
dialogType: DialogType.info,
borderSide: const BorderSide(
color: Colors.green,
width: 2,
),
width: 280,
buttonsBorderRadius: const BorderRadius.all(
Radius.circular(2),
),
dismissOnTouchOutside: true,
dismissOnBackKeyPress: false,
onDismissCallback: (type) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Dismissed by $type'),
),
);
},
headerAnimationLoop: false,
animType: AnimType.bottomSlide,
title: 'INFO',
desc: 'This Dialog can be dismissed touching outside',
showCloseIcon: true,
btnCancelOnPress: () {},
btnOkOnPress: () {},
).show();
},
child: const Text('Info Dialog fixed width and square buttons'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
AwesomeDialog(
context: context,
dialogType: DialogType.warning,
headerAnimationLoop: false,
animType: AnimType.bottomSlide,
title: 'Question',
desc: 'Dialog description here...',
buttonsTextStyle: const TextStyle(color: Colors.black),
showCloseIcon: true,
btnCancelOnPress: () {},
btnOkOnPress: () {},
).show();
},
child: const Text('Warning Dialog With Custom BTN Style'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
AwesomeDialog(
context: context,
dialogType: DialogType.infoReverse,
headerAnimationLoop: true,
animType: AnimType.bottomSlide,
title: 'INFO Reversed',
reverseBtnOrder: true,
btnOkOnPress: () {},
btnCancelOnPress: () {},
desc:
'Lorem ipsum dolor sit amet consectetur adipiscing elit eget ornare tempus, vestibulum sagittis rhoncus felis hendrerit lectus ultricies duis vel, id morbi cum ultrices tellus metus dis ut donec. Ut sagittis viverra venenatis eget euismod faucibus odio ligula phasellus,',
).show();
},
child: const Text('Info Reverse Dialog Without buttons'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
AwesomeDialog(
context: context,
dialogType: DialogType.warning,
headerAnimationLoop: false,
animType: AnimType.topSlide,
showCloseIcon: true,
closeIcon: const Icon(Icons.close_fullscreen_outlined),
title: 'Warning',
desc:
'Dialog description here..................................................',
btnCancelOnPress: () {},
onDismissCallback: (type) {
debugPrint('Dialog Dismiss from callback $type');
},
btnOkOnPress: () {},
).show();
},
child: const Text('Warning Dialog'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
AwesomeDialog(
context: context,
dialogType: DialogType.error,
animType: AnimType.rightSlide,
headerAnimationLoop: false,
title: 'Error',
desc:
'Dialog description here..................................................',
btnOkOnPress: () {},
btnOkIcon: Icons.cancel,
btnOkColor: Colors.red,
).show();
},
child: const Text('Error Dialog'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
AwesomeDialog(
context: context,
dialogType: DialogType.question,
animType: AnimType.rightSlide,
headerAnimationLoop: true,
title: 'Question',
desc:
'Dialog description here..................................................',
btnOkOnPress: () {},
).show();
},
child: const Text('Question Dialog'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
AwesomeDialog(
context: context,
animType: AnimType.leftSlide,
headerAnimationLoop: false,
dialogType: DialogType.success,
showCloseIcon: true,
title: 'Succes',
desc:
'Dialog description here..................................................',
btnOkOnPress: () {
debugPrint('OnClcik');
},
btnOkIcon: Icons.check_circle,
onDismissCallback: (type) {
debugPrint('Dialog Dissmiss from callback $type');
},
).show();
},
child: const Text('Success Dialog'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
AwesomeDialog(
context: context,
headerAnimationLoop: false,
dialogType: DialogType.noHeader,
title: 'No Header',
desc:
'Dialog description here..................................................',
btnOkOnPress: () {
debugPrint('OnClcik');
},
btnOkIcon: Icons.check_circle,
).show();
},
child: const Text('No Header Dialog'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
AwesomeDialog(
context: context,
animType: AnimType.scale,
dialogType: DialogType.info,
body: const Center(
child: Text(
'If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
title: 'This is Ignored',
desc: 'This is also Ignored',
).show();
},
child: const Text('Custom Body Dialog'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
AwesomeDialog(
context: context,
dialogType: DialogType.infoReverse,
animType: AnimType.scale,
title: 'Auto Hide Dialog',
desc: 'AutoHide after 2 seconds',
autoHide: const Duration(seconds: 2),
onDismissCallback: (type) {
debugPrint('Dialog Dissmiss from callback $type');
},
).show();
},
child: const Text('Auto Hide Dialog'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
AwesomeDialog(
context: context,
keyboardAware: true,
dismissOnBackKeyPress: false,
dialogType: DialogType.warning,
animType: AnimType.bottomSlide,
btnCancelText: "Cancel Order",
btnOkText: "Yes, I will pay",
title: 'Continue to pay?',
desc:
'Please confirm that you will pay 3000 INR within 30 mins. Creating orders without paying will create penalty charges, and your account may be disabled.',
btnCancelOnPress: () {},
btnOkOnPress: () {},
).show();
},
child: const Text('Testing Dialog'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
late AwesomeDialog dialog;
dialog = AwesomeDialog(
context: context,
animType: AnimType.scale,
dialogType: DialogType.info,
keyboardAware: true,
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text(
'Form Data',
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 10),
Material(
elevation: 0,
color: Colors.blueGrey.withAlpha(40),
child: TextFormField(
autofocus: true,
minLines: 1,
decoration: const InputDecoration(
border: InputBorder.none,
labelText: 'Title',
prefixIcon: Icon(Icons.text_fields),
),
),
),
const SizedBox(height: 10),
Material(
elevation: 0,
color: Colors.blueGrey.withAlpha(40),
child: TextFormField(
autofocus: true,
keyboardType: TextInputType.multiline,
minLines: 2,
maxLines: null,
decoration: const InputDecoration(
border: InputBorder.none,
labelText: 'Description',
prefixIcon: Icon(Icons.text_fields),
),
),
),
const SizedBox(height: 10),
ElevatedButton(
onPressed: () {
dialog.dismiss();
},
child: const Text('Close'),
)
],
),
),
)..show();
},
child: const Text('Body with Input'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () async {
final dismissMode = await AwesomeDialog(
context: context,
dialogType: DialogType.noHeader,
buttonsBorderRadius: const BorderRadius.all(
Radius.circular(2),
),
animType: AnimType.rightSlide,
title: 'Passing Data Back',
titleTextStyle: const TextStyle(
fontSize: 32,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w600,
),
desc: 'Dialog description here...',
showCloseIcon: true,
btnCancelOnPress: () {},
btnOkOnPress: () {},
autoDismiss: false,
onDismissCallback: (type) {
Navigator.of(context).pop(type);
},
barrierColor: Colors.purple[900]?.withOpacity(0.54),
).show();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Dismissed by $dismissMode'),
),
);
},
child: const Text('Passing Data Back from Dialog'),
),
],
),
),
),
),
);
}
}
自定义对话框属性
AwesomeDialog 类提供了许多可配置的属性，以满足不同的需求。以下是部分常用属性及其描述：
| 属性名称 | 数据类型 | 描述 | 默认值 |
|---|---|---|---|
dialogType |
DialogType |
设置对话框类型，如 DialogType.info |
Null |
animType |
AnimType |
对话框进入动画类型 | AnimType.SCALE |
title |
String |
设置对话框标题 | Null |
desc |
String |
设置对话框描述文本 | Null |
body |
Widget |
创建自定义对话框主体 | Null |
btnOkOnPress |
Function |
确认按钮点击事件处理函数 | Null |
btnCancelOnPress |
Function |
取消按钮点击事件处理函数 | Null |
autoHide |
Duration |
设置自动隐藏对话框的时间 | Null |
通过这些属性，您可以轻松地创建出符合需求的精美对话框。希望这篇文章能帮助您更好地理解和使用 awesome_dialog 插件！
更多关于Flutter自定义对话框插件awesome_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自定义对话框插件awesome_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用awesome_dialog插件来创建自定义对话框的示例代码。这个插件提供了丰富的对话框样式和功能，可以很方便地进行自定义。
首先，你需要在你的pubspec.yaml文件中添加awesome_dialog依赖：
dependencies:
flutter:
sdk: flutter
awesome_dialog: ^3.3.5 # 请注意版本号，这里只是一个示例，你应该使用最新版本
然后，运行flutter pub get来安装依赖。
接下来，在你的Flutter项目中，你可以按照以下步骤使用AwesomeDialog来创建自定义对话框。
示例代码
1. 导入必要的包
在你的Dart文件中，首先导入awesome_dialog包：
import 'package:flutter/material.dart';
import 'package:awesome_dialog/awesome_dialog.dart';
2. 创建并显示对话框
你可以在你的组件中创建并显示一个自定义对话框。以下是一个简单的示例：
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 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('Awesome Dialog Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AwesomeDialog(
context: context,
dialogType: DialogType.SUCCESS,
title: 'Success Dialog',
desc: 'This is a custom success dialog!',
btnOk: Text('OK'),
onDismiss: () {},
// You can customize the dialog's appearance further using the following properties
// headerAnimation: HeaderAnimation.SCALE,
// animationDuration: 300,
// width: 0.8.sw, // 80% of screen width
// radius: 12,
// headerColor: Colors.blue,
// animationType: AnimationType.TOP_SLIDE,
// dismissible: false,
// showSeparator: true,
// body: Center(child: Text('Custom body content')),
);
},
);
},
child: Text('Show Dialog'),
),
),
);
}
}
在这个示例中，我们创建了一个简单的按钮，当点击按钮时，会显示一个自定义的成功对话框。你可以根据需要进一步自定义对话框的标题、描述、按钮文本以及外观属性。
进一步自定义
你可以通过传递更多的参数来进一步自定义对话框，例如：
headerAnimation: 控制标题动画效果。animationDuration: 动画持续时间。width: 对话框宽度。radius: 对话框圆角半径。headerColor: 对话框标题颜色。animationType: 对话框显示和消失的动画类型。dismissible: 是否可以通过点击背景来关闭对话框。showSeparator: 是否显示分隔线。body: 自定义对话框的主体内容。
通过这些参数，你可以创建出符合你需求的自定义对话框。
希望这个示例能帮助你在Flutter项目中成功使用awesome_dialog插件！
