Flutter对话框插件d_dialog的使用
Flutter对话框插件d_dialog的使用
Custom dialog with blur background, popup animation and progressDialog with native style.
不仅帮助你展示带有模糊背景的对话框，d_dialog还可以帮助你做很多事情。例如，使用d_dialog你可以向用户显示ProgressDialog，直到Future完成！
首先，让我们告别旧式的showDialog(blablabla)方式。使用DDialog，你只需调用.show(context)即可完成一切！
这里有五种类型，分别是DDialog、DAlertDialog、ProgressDialog、CustomProgressDialog 和 ZoomDialog。
DDialog
这是一个简单的对话框，你可以直接查看它们而无需其他操作。
await DDialog(
dialogStyle: DialogStyle(titleDivider: true),
title: Text("Hi, This is d_dialog"),
content: Text("And here is your content, hoho... "),
actions: [
FlatButton(child: Text("You"), onPressed: () {}),
FlatButton(child: Text("Are"), onPressed: () {}),
FlatButton(child: Text("Awesome"), onPressed: () {}),
],
).show(context);
DAlertDialog
这是一种可以直接设置背景属性的对话框，无需使用DialogBackground包装。
await DAlertDialog(
dialogStyle: DialogStyle(titleDivider: true),
title: Text("Hi, This is DAlertDialog"),
content: Text("And here is your content, hoho... "),
actions: [
FlatButton(child: Text("You"), onPressed: () {}),
FlatButton(child: Text("Are"), onPressed: () {}),
FlatButton(child: Text("Awesome"), onPressed: () {}),
],
).show(context);
ProgressDialog
将显示具有Android原生样式的ProgressDialog。
ProgressDialog progressDialog = ProgressDialog(context,
message: Text("This is the message"),
title: Text("This is the title")
);
// 设置消息
progressDialog.setTitle(Text("Loading"));
progressDialog.setMessage(Text("Please Wait, Injecting your phone with my virus"));
progressDialog.show();
await Future.delayed(Duration(seconds: 5));
// 已经显示了进度对话框？别担心，你可以更改消息
progressDialog.setTitle(Text("Just Kidding"));
progressDialog.setMessage(Text("I mean, virus of love :*"));
await Future.delayed(Duration(seconds: 5));
progressDialog.dismiss();
CustomProgressDialog
将显示一个可以自定义小部件的进度对话框。
CustomProgressDialog progressDialog = CustomProgressDialog(context, blur: 10);
// 设置加载小部件
progressDialog.setLoadingWidget(CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.red)));
progressDialog.show(useSafeArea: false);
await Future.delayed(Duration(seconds: 5));
// 已经显示了进度对话框？别担心，你可以更改加载小部件
progressDialog.setLoadingWidget(NewLoadingWidget());
await Future.delayed(Duration(seconds: 5));
progressDialog.dismiss();
每个进度对话框都有一个.future(context)静态函数，可以帮助你在Future完成之前显示进度对话框。
///ProgressDialog
await ProgressDialog.future(
context,
future: Future.delayed(Duration(seconds: 5), () {
return "HIYAAA";
}),
message: Text("Please Wait"),
cancelText: Text("Batal"),
title: Text("Loging in"),
)
///CustomProgressDialog
await CustomProgressDialog.future(
context,
future: Future.delayed(Duration(seconds: 5), () {
return "WOHOOO";
}),
loadingWidget: Center(
child: Container(
alignment: Alignment.center,
child: CircularProgressIndicator(),
),
),
backgroundColor: Colors.blue.withOpacity(.5),
)
ZoomDialog
这是一种可以缩放的对话框，你可以在这个对话框上缩放任何类型的组件。
await ZoomDialog(
zoomScale: 5,
child: Container(
child: Text("Zoom me!"),
color: Colors.white,
padding: EdgeInsets.all(20),
),
).show(context);
Dialog Extensions!
你可以直接在Flutter的内置对话框上调用.show(context)。
DAlertDialog(...).show(context);
SimpleDialog(...).show(context);
Dialog(...).show(context);
CupertinoDialog(...).show(context);
CupertinoAlertDialog(...).show(context);
DialogBackground
你可以使用DialogBackground来创建自己的自定义对话框，并轻松地显示它们。不仅如此，你还可以更改屏障颜色/背景颜色并添加一些模糊效果。
await DialogBackground(
dialog: DAlertDialog(
title: Text("Alert Dialog"),
content: Text("Wohoo.. This is ordinary AlertDialog with Blur background"),
actions: [
FlatButton(child: Text("You"), onPressed: () {}),
FlatButton(child: Text("Are"), onPressed: () {}),
FlatButton(child: Text("Awesome"), onPressed: () {}),
],
),
).show(context);
示例代码
import 'package:d_dialog/d_dialog.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Blur Dialog',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Example BlurDialog'),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({super.key, required this.title});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView(
padding: EdgeInsets.all(20),
children: [
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
child: Text(
'DAlertDialog show',
style: TextStyle(color: Colors.white),
),
onPressed: () {
DAlertDialog(
title: Text('Test'),
content: Text('Iya iya'),
blur: 2,
).show(context, transitionType: DialogTransitionType.bubble);
},
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
child: Text(
'DDialog can do it too!',
style: TextStyle(color: Colors.white),
),
onPressed: () {
DDialog(
title: Text('Test'),
dialogStyle: DialogStyle(
animatePopup: false,
),
content: Text('Iya iya'),
).show(context);
},
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
onPressed: () async {
ProgressDialog progressDialog = ProgressDialog(
context,
blur: 10,
dialogTransitionType: DialogTransitionType.shrink,
transitionDuration: Duration(milliseconds: 100),
onDismiss: () {
if (kDebugMode) {
print('Do something onDismiss');
}
},
);
progressDialog.setLoadingWidget(CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.red),
));
progressDialog.setMessage(
Text('Please Wait, Injecting your phone with my virus'));
progressDialog.setTitle(Text('Loading'));
progressDialog.show(useSafeArea: false);
await Future.delayed(Duration(seconds: 5));
progressDialog.setMessage(Text('I mean, virus of love :*'));
progressDialog.setTitle(Text('Just Kidding'));
await Future.delayed(Duration(seconds: 5));
progressDialog.dismiss();
},
child: Text('Progress Dialog', style: TextStyle(color: Colors.white)),
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
onPressed: () async {
CustomProgressDialog progressDialog = CustomProgressDialog(
context,
blur: 10,
onDismiss: () {
if (kDebugMode) {
print('Do something onDismiss');
}
},
);
progressDialog.setLoadingWidget(CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.red),
));
progressDialog.show(useSafeArea: false);
await Future.delayed(Duration(seconds: 5));
await Future.delayed(Duration(seconds: 5));
progressDialog.dismiss();
},
child: Text('Custom Progress Dialog', style: TextStyle(color: Colors.white)),
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
onPressed: () async {
if (kDebugMode) {
print(await ProgressDialog.future(
context,
blur: 0.0,
future: Future.delayed(Duration(seconds: 5), () {
return 'HIYAAA';
}),
onProgressError: (error) {
if (kDebugMode) {
print('Do something onProgressError');
}
},
onProgressFinish: (data) {
if (kDebugMode) {
print('Do something onProgressFinish');
}
},
onDismiss: () {
if (kDebugMode) {
print('Dismissed');
}
},
message: Text('Please Wait'),
cancelText: Text('Batal'),
title: Text('Loging in'),
));
}
},
child: Text('Progress Dialog Future', style: TextStyle(color: Colors.white)),
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
onPressed: () async {
if (kDebugMode) {
print(await CustomProgressDialog.future(
context,
backgroundColor: Colors.blue.withOpacity(.5),
future: Future.delayed(Duration(seconds: 5), () {
return 'WOHOOO';
}),
onProgressError: (error) {
if (kDebugMode) {
print('Do something onProgressError');
}
},
onProgressFinish: (data) {
if (kDebugMode) {
print('Do something onProgressFinish');
}
},
onDismiss: () {
if (kDebugMode) {
print('Dismissed');
}
},
));
}
},
child: Text('Custom Progress Dialog Future', style: TextStyle(color: Colors.white)),
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
onPressed: () async {
await DAlertDialog(
dialogStyle: DialogStyle(titleDivider: true),
title: Text('Hi, This is DAlertDialog'),
content: Text('And here is your content, hoho... '),
actions: [
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
child: Text('You'),
onPressed: () {},
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
child: Text('Are'),
onPressed: () {},
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
child: Text('Awesome'),
onPressed: () {},
)
],
).show(context);
},
child: Text('Show DAlertDialog', style: TextStyle(color: Colors.white)),
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
onPressed: () async {
await DDialog(
dialogStyle: DialogStyle(titleDivider: true),
title: Text('Hi, This is DDialog'),
content: Text('And here is your content, hoho... '),
actions: [
TextButton(
child: Text('You'),
onPressed: () {},
),
TextButton(
child: Text('Are'),
onPressed: () {},
),
TextButton(
child: Text('Awesome'),
onPressed: () {},
)
],
).show(
context,
);
},
child: Text('Show DDialog', style: TextStyle(color: Colors.white)),
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
child: Text(
'Show Alert Dialog\nWith Blur Background',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
onPressed: () async {
await DialogBackground(
barrierColor: Colors.black.withOpacity(.5),
blur: 0,
dialog: AlertDialog(
title: Text('Alert Dialog'),
content: Text(
'Wohoo.. This is ordinary AlertDialog with Blur background'),
actions: [
TextButton(
child: Text('You'),
onPressed: () {},
),
TextButton(
child: Text('Are'),
onPressed: () {},
),
TextButton(
child: Text('Awesome'),
onPressed: () {},
)
],
),
).show(
context,
);
},
),
SizedBox(
height: 10,
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
child: Text(
'Show Alert Dialog\nWith Custom Background Color',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
onPressed: () async {
await DAlertDialog(
backgroundColor: Colors.red.withOpacity(.5),
blur: 0,
title: Text('Alert Dialog'),
content: Text(
'Wohoo.. This is ordinary AlertDialog with Custom Color background'),
actions: [
TextButton(
child: Text('You'),
onPressed: () {},
),
TextButton(
child: Text('Are'),
onPressed: () {},
),
TextButton(
child: Text('Awesome'),
onPressed: () {},
)
],
).show(context);
},
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
child: Text(
'Dialog Extension',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
onPressed: () async {
await AlertDialog(
title: Text('Alert Dialog'),
content: Text(
'Wohoo.. This is ordinary AlertDialog with Blur background'),
actions: [
TextButton(
child: Text('You'),
onPressed: () {},
),
TextButton(
child: Text('Are'),
onPressed: () {},
),
TextButton(
child: Text('Awesome'),
onPressed: () {},
)
],
).show(context);
},
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
child: Text(
'CupertinoDialog Extension',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
onPressed: () async {
await CupertinoAlertDialog(
title: Text('Alert Dialog'),
content: Text(
'Wohoo.. This is ordinary AlertDialog with Blur background'),
actions: [
TextButton(
child: Text('You'),
onPressed: () {},
),
TextButton(
child: Text('Are'),
onPressed: () {},
),
TextButton(
child: Text('Awesome'),
onPressed: () {},
)
],
).show(context);
},
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
child: Text(
'ZoomDIALOG',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
onPressed: () async {
await ZoomDialog(
zoomScale: 5,
child: Container(
color: Colors.white,
padding: EdgeInsets.all(20),
child: Text('Zoom me!'),
),
).show(context);
},
),
],
),
);
}
}
更多关于Flutter对话框插件d_dialog的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter对话框插件d_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
d_dialog 是一个用于 Flutter 的对话框插件，它提供了多种类型的对话框，使得在 Flutter 应用中显示对话框变得更加简单和灵活。以下是如何使用 d_dialog 插件的基本步骤。
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 d_dialog 插件的依赖：
dependencies:
flutter:
sdk: flutter
d_dialog: ^最新版本 # 请替换为最新版本号
然后运行 flutter pub get 来安装依赖。
2. 导入包
在你的 Dart 文件中导入 d_dialog：
import 'package:d_dialog/d_dialog.dart';
3. 使用 d_dialog
显示基本对话框
d_dialog 提供了多种类型的对话框，例如 DDialogBasic 用于显示基本的对话框。
ElevatedButton(
onPressed: () {
DDialogBasic(
context: context,
title: "提示",
content: "这是一个基本的对话框",
onPositive: () {
print("确定按钮被点击");
},
).show();
},
child: Text("显示基本对话框"),
);
显示确认对话框
DDialogConfirm 用于显示带有确认和取消按钮的对话框。
ElevatedButton(
onPressed: () {
DDialogConfirm(
context: context,
title: "确认",
content: "你确定要执行此操作吗？",
onPositive: () {
print("确认按钮被点击");
},
onNegative: () {
print("取消按钮被点击");
},
).show();
},
child: Text("显示确认对话框"),
);
显示输入对话框
DDialogInput 用于显示带有输入框的对话框。
ElevatedButton(
onPressed: () {
DDialogInput(
context: context,
title: "输入",
hint: "请输入内容",
onPositive: (String value) {
print("输入的内容: $value");
},
).show();
},
child: Text("显示输入对话框"),
);
显示自定义对话框
d_dialog 也支持自定义对话框，你可以通过传递一个 Widget 来创建自定义的对话框。
ElevatedButton(
onPressed: () {
DDialogCustom(
context: context,
child: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("这是一个自定义对话框"),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("关闭"),
),
],
),
),
).show();
},
child: Text("显示自定义对话框"),
);