Flutter弹窗提示插件alert_craft的使用

alert_craft 是一个用于在你的 Flutter 应用程序中管理各种覆盖层和警告的插件。它提供了一个简单的 API 来显示警告对话框、加载对话框、选择对话框、吐司消息和自定义小部件。

特性

• 显示警告对话框：显示可自定义的警告对话框。
• 显示加载对话框：显示加载指示器。
• 显示选择对话框：显示包含可选选项的对话框。
• 显示吐司消息：显示非干扰性的吐司消息。
• 显示自定义对话框：在对话框中显示自定义小部件。
• 显示自定义警告：显示包含自定义小部件的自定义警告。
• 关闭警告：关闭当前显示的覆盖层或警告。

显示警告对话框

显示一个可自定义的警告对话框，包括标题、描述和可选按钮样式。

void showAlert() {
  ShowAlert().showAlertDialog(
    type: 1,
    title: '警告标题',
    description: '这是一个警告描述。',
    buttonColor: Colors.blue,
    buttonText: '确定',
    buttonTextColor: Colors.white,
    backgroundColor: Colors.black,
  );
}

显示加载对话框

在当前屏幕上显示加载指示器。

void showLoading(BuildContext context) {
  ShowAlert().showLoadingDialog(context);
}

显示选择对话框

显示一个带有选项和自定义按钮动作的对话框。

void showSelection() {
  ShowAlert().showSelectionDialog(
    type: 1,
    title: '选择一个选项',
    description: '请选择以下选项：',
    buttonTextLeft: '取消',
    buttonTextRight: '确认',
    leftFunction: () {
      // 处理左按钮动作
    },
    rightFunction: () {
      // 处理右按钮动作
    },
  );
}

显示吐司消息

显示一个非干扰性的吐司消息，包括标题和描述。

void showToast() {
  ShowAlert().showToastMessage(
    type: 1,
    title: '吐司标题',
    description: '这是一条吐司消息。',
    backgroundColor: Colors.green,
  );
}

显示自定义对话框

在对话框中显示自定义小部件。

void showCustomDialog() {
  ShowAlert().showCustomDialog(
    MyCustomWidget(), // 替换为你的自定义小部件
  );
}

显示自定义警告

显示包含自定义小部件的自定义警告。

void showCustomAlert() {
  ShowAlert().showCustomAlert(
    MyCustomAlertWidget(), // 替换为你的自定义警告小部件
  );
}

关闭警告

关闭当前显示的覆盖层或警告。

void closeAlert() {
  ShowAlert().closeAlert();
}

安装

将 alert_craft 添加到你的 pubspec.yaml 文件中：

dependencies:
  alert_craft: ^1.0.0

示例代码

以下是一个完整的示例代码，展示了如何使用 alert_craft 插件来实现不同的弹窗功能。

import 'package:alert_craft/service/overlay_service.dart';
import 'package:flutter/material.dart';
import 'package:alert_craft/alert_craft.dart';

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

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

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

class HomeScreen extends StatelessWidget {
  final ShowAlert _showAlert = ShowAlert();

  HomeScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Alert Craft 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                _showAlert.showAlertDialog(
                  type: 1,
                  title: '警告对话框',
                  description: '这是一个警告对话框示例。',
                  buttonColor: Colors.blue,
                  buttonText: '确定',
                  buttonTextColor: Colors.white,
                  backgroundColor: Colors.grey[200],
                );
              },
              child: const Text('显示警告对话框'),
            ),
            ElevatedButton(
              onPressed: () {
                _showAlert.showLoadingDialog();
              },
              child: const Text('显示加载对话框'),
            ),
            ElevatedButton(
              onPressed: () {
                _showAlert.showSelectionDialog(
                  type: 2,
                  title: '选择对话框',
                  description: '请选择一个选项：',
                  buttonTextLeft: '取消',
                  buttonTextRight: '确认',
                  buttonColor: Colors.green,
                  buttonTextColor: Colors.white,
                  backgroundColor: Colors.white,
                  leftFunction: () {},
                  rightFunction: () {} ,
                );
              },
              child: const Text('显示选择对话框'),
            ),
            ElevatedButton(
              onPressed: () {
                _showAlert.showToastMessage(
                  type: 3,
                  title: '吐司消息',
                  description: '这是一条吐司消息示例。',
                  backgroundColor: Colors.black,
                );
              },
              child: const Text('显示吐司消息'),
            ),
            ElevatedButton(
              onPressed: () {
                _showAlert.showCustomDialog(
                  const CustomDialogWidget(),
                );
              },
              child: const Text('显示自定义对话框'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('自定义对话框'),
      content: const Text('这是一个自定义对话框示例。'),
      actions: [
        TextButton(
          onPressed: () => OverlayService().closeOverlay(),
          child: const Text('关闭'),
        ),
      ],
    );
  }
}