Flutter美观对话框插件pretty_dialog的使用

简介

pretty_dialog 是一个用于在 Flutter 应用程序中创建美观对话框和提示框的包。它提供了多种类型的对话框和提示框，包括警报对话框、操作对话框、选项对话框以及各种类型的提示框。

以下是如何使用 pretty_dialog 的详细说明和完整示例。

使用方法

警报对话框 (Alert Dialog)

用于显示成功、警告或错误的消息。

PrettyDialog.showAlertDialog(
    context,
    alertType: AlertType.success, // 可选值：success, warning, error
    okText: "OK",
    title: "您的账户已成功创建",
);

操作对话框 (Action Dialog)

用于显示带有确认和取消按钮的对话框。

var result = await PrettyDialog.showActionDialog(context,
    icon: CupertinoIcons.person_crop_circle_badge_xmark,
    iconColor: Colors.deepOrangeAccent,
    yesText: "是的，删除",
    yesColor: Colors.deepOrangeAccent,
    cancelText: "否",
    title: "您确定要删除您的账户吗？",
    subTitle: "所有数据将被永久删除，无法撤销此操作。",
);
// 返回值：
// - `true` 表示用户点击了“是的，删除”
// - `false` 表示用户点击了“否”
// - `null` 表示用户点击了“取消”

选项对话框 (Options Dialog)

用于显示带有多个选项的对话框。

var result = await PrettyDialog.showOptionsDialog(context,
    icon: FontAwesomeIcons.dumbbell,
    title: "为什么锻炼身体？",
    options: [
      "为了增肌",
      "为了减脂",
      "为了保持健康",
    ],
);
// 返回值是一个整数，表示用户选择的选项的索引

错误提示框 (Toast)

用于显示错误信息。

PrettyToast.showErrorToast(context, "出错了！");

进度提示框 (Progress Toast)

用于显示进度条。

PrettyToast.showProgressToast(context, text: "正在处理...");
Future.delayed(const Duration(seconds: 3), () => PrettyToast.hideProgressToast());

完整示例

以下是一个完整的 Flutter 示例，展示了如何使用 pretty_dialog 包的各种功能。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:pretty_dialog/pretty_dialog.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: const Text('警报对话框'),
              onPressed: () => PrettyDialog.showAlertDialog(
                context,
                alertType: AlertType.success,
                okText: "确定",
                title: "您的账户已成功创建",
              ),
            ),
            ElevatedButton(
              child: const Text('确认对话框'),
              onPressed: () => PrettyDialog.showActionDialog(context,
                  icon: CupertinoIcons.person_crop_circle_badge_xmark,
                  iconColor: Colors.deepOrangeAccent,
                  yesText: "是的，删除",
                  yesColor: Colors.deepOrangeAccent,
                  cancelText: "否",
                  title: "您确定要删除您的账户吗？",
                  subTitle: "所有数据将被永久删除，无法撤销此操作。"),
            ),
            ElevatedButton(
              child: const Text('选项对话框'),
              onPressed: () => PrettyDialog.showOptionsDialog(context,
                  icon: FontAwesomeIcons.dumbbell,
                  title: "为什么锻炼身体？",
                  options: [
                    "为了增肌",
                    "为了减脂",
                    "为了保持健康",
                  ]),
            ),
            ElevatedButton(
              child: const Text('错误提示框'),
              onPressed: () => PrettyToast.showErrorToast(context, "出错了！"),
            ),
            ElevatedButton(
              child: const Text('进度提示框'),
              onPressed: () {
                PrettyToast.showProgressToast(context, text: "正在处理...");
                Future.delayed(const Duration(seconds: 3), () => PrettyToast.hideProgressToast());
              },
            )
          ],
        ),
      ),
    );
  }
}