✨ awesome_custom_dialog #

🎖 安装 #

1、安装

dependencies:
  awesome_custom_dialog: ^0.0.1

💡 使用示例 #

以下是一个完整的示例，展示如何使用 awesome_custom_dialog 插件创建一个自定义对话框。

首先，确保在 pubspec.yaml 文件中添加了依赖项：

dependencies:
  awesome_custom_dialog: ^0.0.1

然后运行 flutter pub get 来获取依赖。

接下来，我们通过以下代码来演示如何使用 awesome_custom_dialog 创建一个自定义对话框。

示例代码

library awesome_custom_dialog_example;

import 'package:awesome_custom_dialog/awesome_custom_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 const MaterialApp(
      home: AppHome(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化对话框上下文
    ACDDialog.init(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Awesome Custom Dialog 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 显示成功对话框
                acdNoticeDialog(
                  title: '成功',
                  message: '操作已完成！',
                  type: ACDType.success,
                );
              },
              child: const Text('显示成功对话框'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 显示警告对话框
                acdNoticeDialog(
                  title: '警告',
                  message: '请检查输入！',
                  type: ACDType.warning,
                );
              },
              child: const Text('显示警告对话框'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 显示错误对话框
                acdNoticeDialog(
                  title: '错误',
                  message: '发生了一些问题！',
                  type: ACDType.error,
                );
              },
              child: const Text('显示错误对话框'),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter自定义对话框插件awesome_custom_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•8 天前

更多关于Flutter自定义对话框插件awesome_custom_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

awesome_custom_dialog 是一个 Flutter 插件，用于创建自定义对话框。它提供了灵活的 API，允许你完全自定义对话框的外观和行为。以下是如何使用 awesome_custom_dialog 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  awesome_custom_dialog: ^1.0.0  # 检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 awesome_custom_dialog 包：

import 'package:awesome_custom_dialog/awesome_custom_dialog.dart';

3. 创建自定义对话框

使用 AwesomeCustomDialog 类来创建自定义对话框。你可以设置标题、内容、按钮样式等。

AwesomeCustomDialog(
  context: context,
  animType: AnimType.SCALE, // 动画类型
  dialogType: DialogType.INFO, // 对话框类型
  title: '标题',
  desc: '这是一个自定义对话框的示例。',
  btnOkOnPress: () {
    // 确定按钮点击事件
    print('确定按钮被点击');
  },
  btnCancelOnPress: () {
    // 取消按钮点击事件
    print('取消按钮被点击');
  },
).show();

4. 自定义对话框样式

你可以通过 customBody 参数来完全自定义对话框的内容：

AwesomeCustomDialog(
  context: context,
  animType: AnimType.SCALE,
  dialogType: DialogType.CUSTOM,
  customBody: Container(
    padding: EdgeInsets.all(20),
    child: Column(
      children: [
        Text('自定义内容', style: TextStyle(fontSize: 18)),
        SizedBox(height: 10),
        Text('你可以在这里添加任何小部件。'),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('关闭'),
        ),
      ],
    ),
  ),
).show();

5. 对话框类型

dialogType 参数允许你选择不同的预定义对话框类型，例如 DialogType.INFO, DialogType.SUCCESS, DialogType.WARNING, DialogType.ERROR, 和 DialogType.CUSTOM。

6. 动画类型

animType 参数控制对话框的动画效果，例如 AnimType.SCALE, AnimType.LEFTSLIDE, AnimType.RIGHTSLIDE, AnimType.BOTTOMSLIDE, AnimType.TOPSLIDE。

7. 完整示例

以下是一个完整的示例，展示了如何使用 awesome_custom_dialog：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Awesome Custom Dialog Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              AwesomeCustomDialog(
                context: context,
                animType: AnimType.SCALE,
                dialogType: DialogType.INFO,
                title: '标题',
                desc: '这是一个自定义对话框的示例。',
                btnOkOnPress: () {
                  print('确定按钮被点击');
                },
                btnCancelOnPress: () {
                  print('取消按钮被点击');
                },
              ).show();
            },
            child: Text('显示对话框'),
          ),
        ),
      ),
    );
  }
}