Flutter自定义对话框插件custom_flutter_dialog_plus的使用

简介

custom_flutter_dialog_plus 是一个功能强大的 Flutter 插件，用于创建自定义对话框。它支持模糊背景、弹出动画以及原生样式的进度对话框。通过这个插件，你可以轻松实现具有动态效果的对话框，而无需手动编写复杂的代码。

以下将详细介绍如何使用该插件及其不同类型的对话框。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  custom_flutter_dialog_plus: ^版本号

然后运行 flutter pub get 安装依赖。

不同类型的对话框

DDialog

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

DAlertDialog 是一个可以直接设置背景属性的对话框。

示例代码

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

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 允许自定义加载小部件。

示例代码

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();

ZoomDialog

ZoomDialog 提供了一个可以缩放的对话框。

示例代码

await ZoomDialog(
  zoomScale: 5,
  child: Container(
    child: Text("Zoom me!"),
    color: Colors.white,
    padding: EdgeInsets.all(20),
  ),
).show(context);

对话框扩展

你可以直接调用 .show(context) 来显示 Flutter 内置的对话框。

示例代码

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);