Flutter对话框插件NDialog的使用

简介

NDialog 4.x 是一个用于Flutter应用程序中创建和自定义对话框的库。它提供了多种类型的对话框，包括普通对话框（Dialog）、带进度条的对话框（ProgressDialog），以及带有动画效果的对话框。通过这个库，开发者可以轻松地为应用添加风格一致且功能强大的对话框组件。

特点

• 支持多种类型的对话框：NDialog, NAlertDialog, ZoomDialog
• 提供了两种形式的进度对话框：ProgressDialog 和 CustomProgressDialog
• 可以与 Future 结合使用，在异步操作期间显示进度对话框
• 内置扩展方法简化了对Flutter内置对话框的支持
• 支持对话框过渡动画

安装

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

dependencies:
  ndialog: ^latest_version # 替换为最新版本号

然后运行命令来安装包：

flutter pub get

使用示例

以下是完整的Dart代码示例，展示了如何使用NDialog创建不同类型的对话框：

import 'package:flutter/material.dart';
import 'package:ndialog/ndialog.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NDialog Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'NDialog Example'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: ListView(
        padding: EdgeInsets.all(20),
        children: [
          _button("Show NAlertDialog", () {
            NAlertDialog(
              dialogStyle: DialogStyle(titleDivider: true),
              title: Text("NAlertDialog"),
              content: Text("This is NAlertDialog's content"),
              actions: <Widget>[
                TextButton(child: Text("Okay"), onPressed: () => Navigator.pop(context)),
                TextButton(child: Text("Close"), onPressed: () => Navigator.pop(context)),
              ],
            ).show(context);
          }),
          
          // 其他按钮...
          
          _button("Show ZoomDialog", () {
            ZoomDialog(
              zoomScale: 5,
              child: Container(
                child: Text("Zoom me!"),
                color: Colors.white,
                padding: EdgeInsets.all(20),
              ),
            ).show(context);
          }),
        ].map((e) => Container(margin: EdgeInsets.symmetric(vertical: 5), child: e)).toList(),
      ),
    );
  }

  Widget _button(String title, Function() onPressed) {
    return OutlinedButton(child: Text(title), onPressed: onPressed);
  }
}

主要组件介绍

对话框类型

NDialog

这是最基本的对话框，允许你直接设置标题、内容和按钮等元素。

NDialog(
  dialogStyle: DialogStyle(titleDivider: true),
  title: Text("NDialog"),
  content: Text("This is NDialog's content"),
  actions: <Widget>[
    TextButton(child: Text("Okay"), onPressed: () => Navigator.pop(context)),
    TextButton(child: Text("Close"), onPressed: () => Navigator.pop(context)),
  ],
).show(context);

NAlertDialog

提供更简洁的方式来自定义背景属性，并且可以直接展示而不需要额外包装。

NAlertDialog(
  dialogStyle: DialogStyle(titleDivider: true),
  title: Text("NAlertDialog"),
  content: Text("This is NAlertDialog's content"),
  actions: <Widget>[
    TextButton(child: Text("Okay"), onPressed: () => Navigator.pop(context)),
    TextButton(child: Text("Close"), onPressed: () => Navigator.pop(context)),
  ],
).show(context);

ZoomDialog

允许用户缩放对话框内的任何部件。

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

进度对话框

ProgressDialog

显示具有Android原生样式的进度对话框。

ProgressDialog progressDialog = ProgressDialog(
  context,
  blur: 10,
  title: Text("Title of ProgressDialog"),
  message: Text("Content of ProgressDialog"),
  onDismiss: () => print("Do something onDismiss"),
);
progressDialog.show();

CustomProgressDialog

允许完全自定义进度指示器和其他UI元素。

CustomProgressDialog progressDialog = CustomProgressDialog(
  context,
  blur: 10,
  onDismiss: () => print("Do something onDismiss"),
);
progressDialog.setLoadingWidget(CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.red)));
progressDialog.show();

使用 Future 显示对话框

可以很方便地将对话框与异步操作关联起来，在任务完成时自动关闭对话框。

ProgressDialog.future(
  context,
  title: Text("ProgressDialog.future()"),
  message: Text("This will finish after 5 seconds"),
  future: Future.delayed(Duration(seconds: 5), () => "The end of future (5 seconds)"),
  onProgressError: (error) => print("Do something onProgressError"),
  onProgressFinish: (data) => print("Do something onProgressFinish"),
  onDismiss: () => print("Dismissed"),
).then((value) => print(value));

扩展功能

• 对话框扩展：支持在所有Flutter内置对话框上调用.show(context)。
• 未来扩展：可以在任何Future对象上添加.showProgressDialog()或.showCustomProgressDialog()方法。

更多详细信息请参考官方文档和示例代码。