Flutter自定义弹窗插件custom_alert_box_example的使用

根据我们的用户研究，包的使用者通常只会花几秒钟阅读包的描述，并决定是否继续阅读README的其余部分。因此，你应该简洁地描述包的功能或实现目标，让读者一目了然。花些时间打磨一个简短而有吸引力的描述，帮助用户做出决策。

使用说明

custom_alert_box_example 是一个用于在 Flutter 应用中创建自定义弹窗的插件。通过该插件，你可以轻松实现具有不同样式的弹窗，满足多样化的用户交互需求。

添加依赖

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

dependencies:
  custom_alert_box_example: ^1.0.0

然后运行以下命令以更新依赖项：

flutter pub get

基本用法

以下是一个简单的示例，展示如何使用 custom_alert_box_example 插件创建一个基本的自定义弹窗。

示例代码

import 'package:flutter/material.dart';
import 'package:custom_alert_box_example/custom_alert_box.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  void _showCustomAlertBox() {
    // 显示自定义弹窗
    CustomAlertBox.show(
      context,
      title: "提示",
      message: "这是自定义弹窗的内容。",
      confirmText: "确定",
      onConfirm: () {
        print("用户点击了确定按钮");
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("自定义弹窗示例"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showCustomAlertBox,
          child: Text("显示弹窗"),
        ),
      ),
    );
  }
}

代码解析

1. 导入依赖
   首先导入 custom_alert_box_example 包。

2. 初始化应用
   在 main() 函数中，初始化 MaterialApp 并设置主页为 HomePage。

3. 创建自定义弹窗逻辑
   在 _showCustomAlertBox 方法中，调用 CustomAlertBox.show 方法来显示弹窗。该方法接受以下参数：

   • context: 当前上下文。
   • title: 弹窗标题。
   • message: 弹窗内容。
   • confirmText: 确定按钮的文字。
   • onConfirm: 用户点击确定按钮时执行的回调函数。

4. 显示按钮
   在 HomePage 的 build 方法中，使用 ElevatedButton 来触发弹窗显示。

效果展示

点击按钮后，会弹出如下的自定义弹窗：

弹窗包含标题、内容、确认按钮，并在点击确认按钮时打印日志。

进阶用法

除了基本用法，你还可以通过传递更多参数来自定义弹窗的样式和行为。例如，添加取消按钮、自定义按钮文字等。

示例代码（进阶）

CustomAlertBox.show(
  context,
  title: "提示",
  message: "这是自定义弹窗的内容。",
  confirmText: "确定",
  cancelText: "取消",
  onConfirm: () {
    print("用户点击了确定按钮");
  },
  onCancel: () {
    print("用户点击了取消按钮");
  },
);