Flutter对话框插件 butterfly_dialog 的使用

butterfly_dialog 是一个用于快速显示各种类型对话框（如成功、错误、警告和删除）的Flutter插件。本文将介绍如何在你的Flutter项目中使用这个插件。

功能展示

以下是不同类型的对话框示例：

Warning Alert	Delete Alert

Success Alert	Error Alert

开始使用

首先，在你的 pubspec.yaml 文件中添加 butterfly_dialog 作为依赖项，然后运行 flutter pub get：

dependencies:
  butterfly_dialog: ^0.0.3

使用方法

要使用 ButterflyAlertDialog，你需要调用 show 方法，并提供以下必需参数：

• context
• title
• subtitle
• alertType
• onConfirm

示例代码

以下是一个完整的示例，展示了如何在Flutter应用中使用 ButterflyAlertDialog 显示不同类型的消息对话框。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Butterfly Alert Dialog',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Alert Dialogs'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                ButterflyAlertDialog.show(
                  context: context,
                  title: 'Warning',
                  subtitle: 'This is the subtitle of the alert.',
                  alertType: AlertType.warning,
                  onConfirm: () {
                    // Your confirm action here
                  },
                );
              },
              child: const Text('Show alert dialog - WARNING'),
            ),
            ElevatedButton(
              onPressed: () {
                ButterflyAlertDialog.show(
                  context: context,
                  title: 'Delete',
                  subtitle: 'This is the subtitle of the alert.',
                  alertType: AlertType.delete,
                  onConfirm: () {
                    // Your confirm action here
                  },
                );
              },
              child: const Text('Show alert dialog - DELETE'),
            ),
            ElevatedButton(
              onPressed: () {
                ButterflyAlertDialog.show(
                  context: context,
                  title: 'Success',
                  subtitle: 'This is the subtitle of the alert.',
                  alertType: AlertType.success,
                  onConfirm: () {
                    // Your confirm action here
                  },
                );
              },
              child: const Text('Show alert dialog - SUCCESS'),
            ),
            ElevatedButton(
              onPressed: () {
                ButterflyAlertDialog.show(
                  context: context,
                  title: 'ERROR',
                  subtitle: 'This is the subtitle of the alert.',
                  alertType: AlertType.error,
                  onConfirm: () {
                    // Your confirm action here
                  },
                );
              },
              child: const Text('Show alert dialog - ERROR'),
            ),
          ],
        ),
      ),
    );
  }
}