Flutter对话框插件bluelab_dialog的使用

bluelab_dialog 是一个 Flutter 插件，用于快速创建和显示自定义对话框。它提供了简单的 API 来创建不同类型的对话框，如确认对话框、输入对话框、加载对话框等。以下是如何使用 bluelab_dialog 插件的详细步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  bluelab_dialog: ^1.0.0  # 请检查最新版本

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

2. 导入插件

在需要使用对话框的 Dart 文件中，导入 bluelab_dialog 插件：

import 'package:bluelab_dialog/bluelab_dialog.dart';

3. 使用插件

3.1 显示确认对话框

确认对话框通常用于询问用户是否执行某个操作。

void showConfirmDialog(BuildContext context) {
  BluelabDialog.confirm(
    context: context,
    title: '确认',
    message: '你确定要执行此操作吗？',
    onConfirm: () {
      print('用户点击了确认');
    },
    onCancel: () {
      print('用户点击了取消');
    },
  );
}

3.2 显示输入对话框

输入对话框允许用户输入一些信息。

void showInputDialog(BuildContext context) {
  BluelabDialog.input(
    context: context,
    title: '输入',
    message: '请输入你的名字：',
    onConfirm: (String value) {
      print('用户输入了：$value');
    },
    onCancel: () {
      print('用户点击了取消');
    },
  );
}

3.3 显示加载对话框

加载对话框通常用于在后台执行耗时操作时显示。

void showLoadingDialog(BuildContext context) {
  BluelabDialog.loading(
    context: context,
    message: '加载中...',
  );

  // 模拟耗时操作
  Future.delayed(Duration(seconds: 3), () {
    Navigator.of(context).pop(); // 关闭对话框
  });
}

3.4 显示自定义对话框

你可以使用 BluelabDialog.custom 来显示完全自定义的对话框。

void showCustomDialog(BuildContext context) {
  BluelabDialog.custom(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('自定义对话框'),
        content: Text('这是一个自定义对话框。'),
        actions: <Widget>[
          TextButton(
            child: Text('关闭'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

4. 完整示例

以下是一个完整的示例，展示了如何使用 bluelab_dialog 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bluelab Dialog 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => showConfirmDialog(context),
              child: Text('显示确认对话框'),
            ),
            ElevatedButton(
              onPressed: () => showInputDialog(context),
              child: Text('显示输入对话框'),
            ),
            ElevatedButton(
              onPressed: () => showLoadingDialog(context),
              child: Text('显示加载对话框'),
            ),
            ElevatedButton(
              onPressed: () => showCustomDialog(context),
              child: Text('显示自定义对话框'),
            ),
          ],
        ),
      ),
    );
  }

  void showConfirmDialog(BuildContext context) {
    BluelabDialog.confirm(
      context: context,
      title: '确认',
      message: '你确定要执行此操作吗？',
      onConfirm: () {
        print('用户点击了确认');
      },
      onCancel: () {
        print('用户点击了取消');
      },
    );
  }

  void showInputDialog(BuildContext context) {
    BluelabDialog.input(
      context: context,
      title: '输入',
      message: '请输入你的名字：',
      onConfirm: (String value) {
        print('用户输入了：$value');
      },
      onCancel: () {
        print('用户点击了取消');
      },
    );
  }

  void showLoadingDialog(BuildContext context) {
    BluelabDialog.loading(
      context: context,
      message: '加载中...',
    );

    // 模拟耗时操作
    Future.delayed(Duration(seconds: 3), () {
      Navigator.of(context).pop(); // 关闭对话框
    });
  }

  void showCustomDialog(BuildContext context) {
    BluelabDialog.custom(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('自定义对话框'),
          content: Text('这是一个自定义对话框。'),
          actions: <Widget>[
            TextButton(
              child: Text('关闭'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
}