Flutter简易对话框插件simple_dart_dialog的使用

在Flutter开发中，有时我们需要快速创建一个简单的对话框来与用户交互。simple_dart_dialog 是一个轻量级的Flutter插件，可以帮助我们轻松实现这一功能。

插件组件

simple_dart_dialog 包含以下主要组件：

• AbstractDialog
  抽象类，用于定义基本的对话框行为。
• HeadedDialog
  带有标题的对话框，适用于需要向用户提供更多信息的情况。

这些对话框都包含一个 Completer，可以通过它返回结果作为 Future。

安装插件

首先，在你的 pubspec.yaml 文件中添加插件依赖：

dependencies:
  simple_dart_dialog: ^版本号

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

使用示例

创建一个简单的对话框

以下是一个使用 AbstractDialog 的简单示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Simple Dart Dialog 示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示抽象对话框
              showDialog(
                context: context,
                builder: (context) => AbstractDialog(
                  title: '提示',
                  content: '这是一个简单的对话框',
                  actions: [
                    DialogAction(
                      label: '确定',
                      onPressed: () {
                        Navigator.of(context).pop(true);
                      },
                    ),
                    DialogAction(
                      label: '取消',
                      onPressed: () {
                        Navigator.of(context).pop(false);
                      },
                    ),
                  ],
                ),
              ).then((result) {
                if (result == true) {
                  print('用户点击了确定');
                } else {
                  print('用户点击了取消');
                }
              });
            },
            child: Text('显示对话框'),
          ),
        ),
      ),
    );
  }
}

代码说明：

1. 使用 showDialog 方法来显示对话框。
2. AbstractDialog 构建了一个带有标题、内容和两个按钮（确定和取消）的对话框。
3. 每个按钮通过 onPressed 返回不同的结果，Navigator.of(context).pop() 用于关闭对话框并返回结果。
4. AbstractDialog 的返回值是一个 Future，可以通过 .then() 方法处理用户的选择。

创建带标题的对话框

以下是一个使用 HeadedDialog 的示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Simple Dart Dialog 示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示带标题的对话框
              showDialog(
                context: context,
                builder: (context) => HeadedDialog(
                  title: '重要提示',
                  content: '这是一个带有标题的对话框',
                  actions: [
                    DialogAction(
                      label: '同意',
                      onPressed: () {
                        Navigator.of(context).pop(true);
                      },
                    ),
                    DialogAction(
                      label: '拒绝',
                      onPressed: () {
                        Navigator.of(context).pop(false);
                      },
                    ),
                  ],
                ),
              ).then((result) {
                if (result == true) {
                  print('用户同意');
                } else {
                  print('用户拒绝');
                }
              });
            },
            child: Text('显示带标题的对话框'),
          ),
        ),
      ),
    );
  }
}