flutter_quick_dialog 1.2.3
flutter_quick_dialog: ^1.2.3 copied to clipboard
A clean and lightweight loading/toast widget for Flutter, Easy to use without context, Support iOS、Android
Flutter QuickDialog #
A lightweight Dialog library for Flutter, which is implemented purely in Flutter and enables you to easily call the Dialog and loading functions without the need for context.
Installation #
Add the following code to the pubspec.yaml
file in your project:
dependencies:
quick_dialog: ^latest
Import #
import 'package:quick_dialog/quick_dialog.dart';
QuickDialog Flutter 插件 #
一个轻量高效的Flutter对话框解决方案,提供丰富的自定义配置和流畅的动画效果。
🌟 功能特性 #
- 多主题支持:内置浅色/深色双主题
- 多种对话框类型:
- 模态对话框(Modal)
- 半屏对话框(Half Screen)
- 自定义组件对话框(Widget)
- 灵活动画系统:
- 支持透明度/位移/缩放动画
- 可扩展自定义动画
- 智能布局:
- 顶部/居中/底部定位
- 按钮水平/垂直排列
- 可定制样式:
- 圆角半径
- 边距/内边距
- 文本样式覆盖
- 自定义遮罩颜色
📦 安装 #
在 pubspec.yaml
中添加:
dependencies:
quick_dialog: ^latest_version
🚀 快速开始 #
1. 初始化 #
void main() {
runApp(MaterialApp(
builder: QuickDialog.init(),
home: MyApp(),
));
}
2. 基本使用 #
// 显示模态对话框
QuickDialog.showModal(
title: "系统提示",
content: "确认要删除这条数据吗?",
confirmText: "确认删除",
cancelText: "取消操作",
confirmCallback: () => print("确认操作"),
cancelCallback: () => print("取消操作"),
);
// 显示自定义对话框
QuickDialog.showDialog(
child: MyCustomWidget(),
maskType: QuickDialogMaskType.black,
animation: QuickDialogAnimationStyle.scale,
);
// 关闭对话框
QuickDialog.dismiss();
⚙️ 参数说明 #
showModal 方法参数说明 #
参数名 | 类型 | 说明 |
---|---|---|
title | String? | 弹窗标题文本内容 |
content | String? | 弹窗正文文本内容 |
titleTextStyle | TextStyle? | 标题文本样式 |
contentTextStyle | TextStyle? | 正文文本样式 |
cancelText | String? | 取消按钮文本 |
confirmText | String? | 确认按钮文本 |
cancelTextStyle | TextStyle? | 取消按钮文本样式 |
confirmTextStyle | TextStyle? | 确认按钮文本样式 |
dismissOnTap | bool? | 点击遮罩层是否关闭弹窗 |
contentPadding | EdgeInsets? | 内容区域的内边距 |
contentMargin | EdgeInsets? | 内容区域的外边距 |
radius | BorderRadius? | 弹窗边框圆角半径 |
animation | QuickDialogAnimationStyle? | 动画样式(可选:fade|scale|slideUp|slideDown|slideLeft|slideRight) |
position | QuickDialogPosition? | 显示位置(可选:top|center|bottom) |
maskType | QuickDialogMaskType? | 遮罩类型(可选:transparent|translucent) |
buttonAlignment | QuickDialogButtonAlignment? | 按钮排列方式(可选:left|right|spaceBetween) |
confirmCallback | QuickDialogConfirmCallback? | 确认按钮点击回调 |
cancelCallback | QuickDialogCancelCallback? | 取消按钮点击回调 |
dismissCallback | QuickDialogDismissCallback? | 弹窗完全关闭后的回调 |
动画类型枚举 #
enum QuickDialogAnimationStyle {
opacity, // 透明度动画
offset, // 位移动画
scale, // 缩放动画
custom // 自定义动画
}
遮罩类型枚举 #
enum QuickDialogMaskType {
none, // 无遮罩
clear, // 透明遮罩
black, // 黑色半透明遮罩
custom // 自定义遮罩
}
🎨 自定义样式 #
// 修改全局配置
QuickDialog.instance
..style = QuickDialogStyle.dark
..radius = BorderRadius.circular(20)
..animationDuration = Duration(milliseconds: 300)
..margin = EdgeInsets.symmetric(vertical: 50);
// 自定义按钮样式
QuickDialog.showModal(
confirmTextStyle: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold
),
cancelTextStyle: TextStyle(
color: Colors.grey,
decoration: TextDecoration.underline
),
);
// 自定义按钮样式
QuickDialog.showModal(
cancelTextStyle: QuickDialogTheme.deleteTextStyle
);
⚠️ 注意事项 #
- 必须初始化:在 MaterialApp 中调用
QuickDialog.init()
Open Source License #
❤️❤️❤️ #
Thanks to JetBrains Open Source for support