Flutter对话框插件dialogx的使用

Flutter 对话框插件 Dialogx 的使用

Dialogx

Dialogx 是一个 Flutter 包，它提供了简单的、可自定义的模态对话框、吐司消息和加载指示器。这个包在以整洁且简洁的方式向用户展示信息方面非常有用。

安装

要使用 Dialogx，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  dialogx: ^1.0.0

然后运行 flutter pub get 来安装该包。

使用

模态对话框

要显示一个模态对话框，可以使用 showModalDialog 方法：

final data = await context.showModalDialog<String>(
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('对话框标题'),
      content: Text('对话框内容'),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context, '取消'),
          child: Text('取消'),
        ),
        TextButton(
          onPressed: () => Navigator.pop(context, '确定'),
          child: Text('确定'),
        ),
      ],
    );
  },
);

这个方法接受一个 builder 函数，该函数返回一个 Widget。当对话框显示时，会调用 builder 函数。可以通过传递额外的参数来自定义对话框的外观和行为，例如 barrierColor、barrierDismissible 和 transitionDuration。

吐司消息

要显示一个吐司消息，可以使用 showToast 方法：

context.showToast(
  '这是一条吐司消息',
  toastDuration: Duration(seconds: 3),
  backgroundColor: Colors.black.withOpacity(0.8),
  textColor: Colors.white,
);

这个方法接受一个 String 类型的消息来显示。可以通过传递额外的参数来自定义吐司消息的外观和行为，例如 toastDuration、backgroundColor 和 textColor。

加载指示器

要显示一个加载指示器，可以使用 showLoadingIndicator 方法：

context.showLoading(loader: CircularProgressIndicator());
await Future.delayed(Duration(seconds: 5));
loading.dismiss();

这个方法接受一个 BuildContext 并返回一个 LoadingOverlay 对象，可用于显示和隐藏加载指示器。可以通过传递额外的参数来自定义加载指示器的外观和行为，例如 loadingIndicator 和 loadingMessage。

示例代码

以下是完整的示例代码，展示了如何使用 Dialogx 库中的不同功能：

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

void main() {
  runApp(const MyWidget());
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) {
          return Scaffold(
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      context.showModalDialog(
                        builder: (context) => AlertDialog(
                          title: const Text('警告！'),
                          content: const Text('发生了一些事情！'),
                          actions: [
                            TextButton(
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              child: const Text('确定'),
                            ),
                          ],
                        ),
                      );
                    },
                    child: const Text('显示警告'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      context.showToast('你好，世界！');
                    },
                    child: const Text('显示吐司'),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}