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

custom_popup_dialog 是一个 Flutter 包，它提供了一个可定制的对话框模板。此包允许你创建带有可选 Lottie 动画、背景模糊效果等的美丽且可定制的对话框。

特性

• 带有 Lottie 动画的可定制对话框
• 可选的背景模糊效果或暗化背景
• 可定制的按钮文本和颜色
• 易于集成到任何 Flutter 应用程序中

开始使用

安装

在你的 pubspec.yaml 文件中添加 custom_popup_dialog：

dependencies:
  custom_popup_dialog: ^0.0.3

安装依赖

运行以下命令安装依赖项：

flutter pub get

使用

下面是一个如何在你的 Flutter 应用程序中使用 CustomDialog 小部件的例子：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomeScreen(),
    );
  }
}

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

  // 显示对话框的方法
  void showDialogTemplate(BuildContext context, String? animationPath, String message, {bool blurBackground = true}) {
    showDialog(
      context: context,
      builder: (context) => CustomDialog(
        message: message,
        animationWidth: 120,
        animationHeight: 120,
        headerAnimation: animationPath,
        btnText: '继续',
        bgColor: Colors.white,
        textColor: Colors.black,
        btnColor: Colors.blue,
        btnTextColor: Colors.white,
        blurBackground: blurBackground,
        alternativeBgColor: Colors.black.withOpacity(0.7),
        onBtnPressed: () {
          Navigator.of(context).pop();
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '自定义警告对话框',
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: true,
        backgroundColor: Colors.blueAccent,
      ),
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CustomButton(
              bgColor: Colors.green,
              fgColor: Colors.white,
              text: '显示成功对话框',
              onClick: () {
                showDialogTemplate(context, 'assets/lottie/success.json', '操作成功！', blurBackground: true);
              },
            ),
            const SizedBox(height: 20),
            CustomButton(
              bgColor: Colors.red,
              fgColor: Colors.white,
              text: '显示错误对话框',
              onClick: () {
                showDialogTemplate(context, 'assets/lottie/error.json', '发生错误！', blurBackground: false);
              },
            ),
            const SizedBox(height: 20),
            CustomButton(
              bgColor: Colors.orange,
              fgColor: Colors.white,
              text: '显示警告对话框',
              onClick: () {
                showDialogTemplate(context, 'assets/lottie/alert.json', '这是一个警告！', blurBackground: true);
              },
            ),
            const SizedBox(height: 20),
            CustomButton(
              bgColor: Colors.blueAccent,
              fgColor: Colors.white,
              text: '显示信息对话框',
              onClick: () {
                showDialogTemplate(context, 'assets/lottie/info.json', '这里是一些信息。', blurBackground: false);
              },
            )
          ],
        ),
      ),
    );
  }
}

// 自定义按钮小部件
class CustomButton extends StatelessWidget {
  const CustomButton({
    super.key,
    required this.bgColor,
    required this.fgColor,
    required this.text,
    required this.onClick,
  });

  final Color bgColor;
  final Color fgColor;
  final String text;
  final VoidCallback onClick;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          width: 200,
          child: ElevatedButton(
            onPressed: onClick,
            style: ElevatedButton.styleFrom(
              backgroundColor: bgColor,
              foregroundColor: fgColor,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(5),
              ),
              elevation: 5,
            ),
            child: Text(text),
          ),
        ),
      ],
    );
  }
}

自定义选项

CustomDialog 小部件通过其构造函数参数提供了各种自定义选项：

• message: 在对话框中显示的消息。
• btnText: 按钮上的文本。
• maxLines: 消息文本的最大行数。
• textAlign: 消息文本的对齐方式。
• animationWidth: Lottie 动画的宽度。
• animationHeight: Lottie 动画的高度。
• bgColor: 对话框的背景色。
• textColor: 消息文本的颜色。
• btnColor: 按钮的背景色。
• btnTextColor: 按钮文本的颜色。
• animationDuration: Lottie 动画的持续时间。
• headerAnimation: Lottie 动画文件的路径。
• onBtnPressed: 按钮被按下时的回调函数。
• blurBackground: 是否应用背景模糊效果。
• blurAmount: 如果 blurBackground 为 true，则应用的模糊量。
• alternativeBgColor: 如果 blurBackground 为 false，则使用的背景色。

示例用法

要显示一个带有成功消息和 Lottie 动画的自定义对话框：

showDialogTemplate(context, 'assets/lottie/success.json', '操作成功！', blurBackground: true);

要显示一个带有错误消息且不带背景模糊的自定义对话框：

showDialogTemplate(context, 'assets/lottie/error.json', '发生错误！', blurBackground: false);