Flutter对话框插件dialog_kh的使用

插件简介

Dialog kh 是一个帮助你创建动画、简单、风格化、自定义对话框的Flutter库。该库由 Voern Kimsoer 开发，并得到了 Vann Dev 的支持。

特性

显示警告对话框。
显示底部面板。
警告对话框可以选择是否自动关闭，默认为自动关闭。
支持主题模式：深色模式和浅色模式。
支持自定义颜色、样式、按钮、图标和小部件。
自定义文本字段以提交输入。
头部可以自定义小部件。
底部可以自定义小部件。

安装

在你的 pubspec.yaml 文件中添加最新版本的包（并运行 dart pub get）：

dependencies:
  dialog_kh: ^0.0.3

导入包并在你的Flutter应用中使用它：

import 'package:dialog_kh/dialog_kh.dart';

示例 01

例如，要创建一个带有自动关闭功能的警告对话框，你可以使用以下代码：

/// 显示警告消息
SizedBox(
  width: 280,
  height: 50,
  child: ElevatedButton(
    child: const Text('显示警告消息'),
    onPressed: () {
      DialogKh.alertDialogKh(
        context: context,
        isAutoClosed: true, // 默认值为true
        seconds: 2,
        header: const Icon(Icons.check_circle, color: Colors.green, size: 100),
        title: "恭喜",
        description: "恭喜你的工作做得很好",
        radius: 30,
      );
    },
  ),
),

警告消息

示例 02

例如，要创建一个不自动关闭的警告对话框，并包含确认和取消按钮，你可以使用以下代码：

/// 显示警告消息
SizedBox(
  width: 280,
  height: 50,
  child: ElevatedButton(
    child: const Text('显示警告消息'),
    onPressed: () {
      DialogKh.alertDialogKh(
        context: context,
        isAutoClosed: false, // 默认值为true
        disableBtn: false, // 禁用按钮默认情况下为false，如果你想使用按钮则需要设置为false
        header: Icon(Icons.check_circle, color: Theme.of(context).primaryColor, size: 100),
        title: "恭喜",
        titleColor: Theme.of(context).primaryColor,
        description: "恭喜你的工作做得很好",
        onConfirm: () {
          /// 执行某些操作...
          Navigator.pop(context);
        },
        onCancel: () {
          /// 执行某些操作...
          Navigator.pop(context);
        },
      );
    },
  ),
),

警告对话框01

示例 03

例如，要创建一个带有文本输入框的警告对话框，并在提交时执行某些操作，你可以使用以下代码：

TextEditingController txt = TextEditingController();

/// 显示带有文本输入框的警告对话框
SizedBox(
  width: 280,
  height: 50,
  child: ElevatedButton(
    child: const Text('显示警告消息'),
    onPressed: () {
      txt.clear();
      DialogKh.alertDialogKh(
        context: context,
        header: Icon(Icons.check_circle, color: Theme.of(context).primaryColor, size: 100),
        title: "成功",
        titleColor: Theme.of(context).primaryColor,
        description: "你有什么理由吗？",
        isTextField: true, // 默认值为false
        isAutoClosed: false, // 默认值为true
        txtEditController: txt,
        onSubmit: () {
          /// 执行某些操作...
          print("提交: ${txt.text}");
          Navigator.pop(context);
        },
      );
    },
  ),
),

警告对话框02

示例 04

例如，要显示底部面板消息，你可以使用以下代码：

/// 显示底部面板消息
SizedBox(
  height: 50,
  width: 280,
  child: ElevatedButton(
    child: const Text('底部面板消息'),
    onPressed: () {
      DialogKh.messageKh(
        context: context,
        radius: 15,
        title: "消息",
        description: "恭喜你的工作做得很好",
        leading: const Icon(Icons.email, size: 40),
      );
    },
  ),
),

底部面板消息

示例 05

例如，要显示自定义高度的底部面板，你可以使用以下代码：

/// 显示底部面板
SizedBox(
  height: 50,
  width: 280,
  child: ElevatedButton(
    child: const Text('底部面板'),
    onPressed: () {
      DialogKh.bottomSheetKh(
        context: context,
        height: 500,
        header: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Icon(Icons.check_circle, color: Theme.of(context).primaryColor, size: 100),
        ),
        onConfirm: () {
          /// 执行某些操作...
          Navigator.pop(context);
        },
        onCancel: () {
          /// 执行某些操作...
          Navigator.pop(context);
        },
      );
    },
  ),
),

底部面板

完整示例代码

import 'package:dialog_kh/dialog_kh.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: 'Flutter Demo Dialog Kh',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(brightness: Brightness.dark),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController txt = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Dialog Kh"),
      ),
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            /// 显示警告消息
            SizedBox(
              width: 280,
              height: 50,
              child: ElevatedButton(
                child: const Text('显示警告消息'),
                onPressed: () {
                  DialogKh.alertDialogKh(
                    context: context,
                    isAutoClosed: true, // 默认值为true
                    seconds: 2,
                    header: const Icon(Icons.check_circle, color: Colors.green, size: 100),
                    title: "恭喜",
                    description: "恭喜你的工作做得很好",
                    radius: 30,
                  );
                },
              ),
            ),
            const SizedBox(height: 10),

            /// 显示警告对话框
            SizedBox(
              height: 50,
              width: 280,
              child: ElevatedButton(
                child: const Text('显示警告对话框'),
                onPressed: () {
                  DialogKh.alertDialogKh(
                    context: context,
                    isAutoClosed: false, // 默认值为true
                    disableBtn: false, // 禁用按钮默认情况下为false，如果你想使用按钮则需要设置为false
                    header: Icon(Icons.check_circle, color: Theme.of(context).primaryColor, size: 100),
                    title: "恭喜",
                    titleColor: Theme.of(context).primaryColor,
                    description: "恭喜你的工作做得很好",
                    onConfirm: () {
                      /// 执行某些操作...
                      Navigator.pop(context);
                    },
                    onCancel: () {
                      /// 执行某些操作...
                      Navigator.pop(context);
                    },
                  );
                },
              ),
            ),
            const SizedBox(height: 10),

            /// 显示带有文本输入框的警告对话框
            SizedBox(
              height: 50,
              width: 280,
              child: ElevatedButton(
                child: const Text('显示提交表单'),
                onPressed: () {
                  txt.clear();
                  DialogKh.alertDialogKh(
                    context: context,
                    header: Icon(Icons.check_circle, color: Theme.of(context).primaryColor, size: 100),
                    title: "成功",
                    titleColor: Theme.of(context).primaryColor,
                    description: "你有什么理由吗？",
                    isTextField: true, // 默认值为false
                    isAutoClosed: false, // 默认值为true
                    txtEditController: txt,
                    onSubmit: () {
                      /// 执行某些操作...
                      print("提交: ${txt.text}");
                      Navigator.pop(context);
                    },
                  );
                },
              ),
            ),
            const SizedBox(height: 10),

            /// 显示底部面板消息
            SizedBox(
              height: 50,
              width: 280,
              child: ElevatedButton(
                child: const Text('底部面板消息'),
                onPressed: () {
                  DialogKh.messageKh(
                    context: context,
                    radius: 15,
                    title: "消息",
                    description: "恭喜你的工作做得很好",
                    leading: const Icon(Icons.email, size: 40),
                  );
                },
              ),
            ),
            const SizedBox(height: 10),

            /// 显示底部面板
            SizedBox(
              height: 50,
              width: 280,
              child: ElevatedButton(
                child: const Text('底部面板'),
                onPressed: () {
                  DialogKh.bottomSheetKh(
                    context: context,
                    height: 500,
                    header: Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: Icon(Icons.check_circle, color: Theme.of(context).primaryColor, size: 100),
                    ),
                    onConfirm: () {
                      /// 执行某些操作...
                      Navigator.pop(context);
                    },
                    onCancel: () {
                      /// 执行某些操作...
                      Navigator.pop(context);
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

nodeper 1楼

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

dialog_kh 是一个用于 Flutter 的对话框插件，提供了丰富的预构建对话框样式，方便开发者快速实现常见的对话框功能。以下是 dialog_kh 的基本使用方法和示例。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  dialog_kh: ^1.0.0  # 请确认使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

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

import 'package:dialog_kh/dialog_kh.dart';

3. 使用示例

3.1 基本对话框

void showBasicDialog(BuildContext context) {
  DialogKh.showBasicDialog(
    context,
    title: "提示",
    content: "这是一个基本对话框",
    positiveText: "确定",
    onPositivePressed: () {
      // 点击确定按钮后的操作
      print("确定");
    },
  );
}

3.2 确认对话框

void showConfirmDialog(BuildContext context) {
  DialogKh.showConfirmDialog(
    context,
    title: "确认",
    content: "你确定要执行此操作吗？",
    positiveText: "确定",
    negativeText: "取消",
    onPositivePressed: () {
      // 点击确定按钮后的操作
      print("确定");
    },
    onNegativePressed: () {
      // 点击取消按钮后的操作
      print("取消");
    },
  );
}

3.3 输入对话框

void showInputDialog(BuildContext context) {
  DialogKh.showInputDialog(
    context,
    title: "输入",
    hintText: "请输入内容",
    positiveText: "提交",
    onPositivePressed: (String input) {
      // 点击提交按钮后的操作
      print("输入的内容: $input");
    },
  );
}

3.4 自定义对话框

如果你需要更复杂的对话框，可以使用 DialogKh.showCustomDialog 方法来自定义对话框内容：

void showCustomDialog(BuildContext context) {
  DialogKh.showCustomDialog(
    context,
    title: "自定义对话框",
    content: Column(
      children: [
        Text("这是一个自定义对话框"),
        ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // 关闭对话框
          },
          child: Text("关闭"),
        ),
      ],
    ),
  );
}