Flutter优雅弹窗插件elegant_alert_dialog的使用
Flutter优雅弹窗插件elegant_alert_dialog的使用
Elegant Alert 是一个易于展示给用户的优雅弹窗插件，并且支持自定义。它提供了多种类型的弹窗，如权限请求、多动作弹窗、警告弹窗和信息提示弹窗等。
特性
- 易于设置以向用户显示弹窗。
- 可创建具有多动作的可定制弹窗。
- 内置主题：权限请求、多动作、警告和信息提示。
- 支持动画显示或无动画显示。
- 支持缩放和滑动过渡效果。
- 可自定义外观。
开始使用
要在项目中使用此插件，首先需要在 pubspec.yaml 文件中添加依赖：
dependencies:
elegant_alert_dialog: ^0.0.1
然后运行 flutter pub get 来安装该包。
参数说明
以下是 ElegantAlertDialog 类的一些主要参数：
/// 弹窗内容部件，所有构造函数都必需
/// [ElegantBodyWidget] 包含两个属性 [title] 和 [description]，均为必需
final ElegantBodyWidget alertContent;
/// 弹窗背景颜色，默认为白色
/// 用于渲染弹窗内容部件
final Color backgroundColor;
/// 弹窗阴影列表，默认为null并应用默认阴影
/// 如果想移除阴影，传递空列表到 [dialogShadow]
final List<BoxShadow>? dialogShadow;
/// 动画类型
/// [AnimationTypes.slideAnimation] 使用 [SlideTransition] 渲染缩放动画
/// [AnimationTypes.scaleAnimation] 使用 [Transform.scale] 渲移动画
///
/// [animationCurve] 用于设置动画曲线
/// [animationDuration] 为动画持续时间，类型为 [Duration]
final AnimationTypes animationType;
/// 动画曲线，用于渲染动画，默认为 [Curves.ease]
final Curve animationCurve;
/// 动画持续时间，默认为一秒钟
final Duration animationDuration;
/// 指示屏障是否可被取消，默认为true
final bool barrierDismissable;
/// 弹窗高度
final double height;
/// 弹窗圆角半径
final double borderRadius;
/// 弹窗边框大小
final double borderSize;
/// 指示是否显示动画，默认为true
final bool withAnimation;
/// 弹窗边框颜色
late Color? borderColor;
/// 作为按钮渲染的动作列表（部件）
/// 在使用 [custom] 构造函数时必需
late List<Widget> actions;
/// 主按钮文本
/// [multiActions] 构造函数为主按钮
/// [permission] 构造函数为允许按钮文本
/// [caution] 构造函数为删除按钮文本
/// [info] 构造函数为确认按钮文本
late String? confirmButtonText;
/// 仅在使用 [multiActions] 构造函数时显示的次要主按钮
/// [multiActions] 构造函数为主按钮
late String? secondButtonText;
/// 取消按钮文本
/// [multiActions] 构造函数为取消按钮文本
/// [permission] 构造函数为拒绝按钮文本
/// [caution] 构造函数为取消按钮文本
late String? cancelButtonText;
/// 主按钮回调动作
/// [multiActions] 构造函数为主按钮回调动作
/// [permission] 构造函数为允许按钮回调动作
/// [caution] 构造函数为删除按钮回调动作
/// [info] 构造函数为确认按钮回调动作
late Function()? onConfirmButtonPressed;
/// 仅在使用 [multiActions] 构造函数时显示的次要主按钮的回调动作
late Function()? onSecondaryButtonPressed;
/// 取消按钮动作回调
/// [multiActions] 和 [caution] 构造函数为取消按钮
/// [permission] 构造函数为拒绝按钮
late Function()? onCancelPressed;
/// 主按钮颜色
/// [multiActions] 构造函数为主按钮颜色
/// [permission] 构造函数为允许按钮颜色
/// [caution] 构造函数为删除按钮颜色
/// [info] 构造函数为确认按钮颜色
late Color? confirmButtonColor;
/// 仅在使用 [multiActions] 构造函数时显示的次要主按钮的颜色
late Color? secondButtonColor;
/// 取消按钮颜色
/// [multiActions] 和 [caution] 构造函数为取消按钮颜色
/// [permission] 构造函数为拒绝按钮颜色
late Color? cancelButtonColor;
示例代码
权限弹窗
ElegantAlertDialog.permission(
height: 200,
alertContent: ElegantBodyWidget(
titleWidget: const Row(
children: [
Icon(Icons.camera),
SizedBox(width: 5),
Text(
'Access Camera',
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
bodyWidget: const Text(
"Allow App to take pictures and videos. Capture memorable moments and share them with friends!",
),
),
confirmButtonText: 'Allow',
cancelButtonText: 'Deny',
).show(context);
多动作弹窗
ElegantAlertDialog.multiActions(
height: 180,
alertContent: ElegantBodyWidget(
titleWidget: const Text(
"Access to contact",
style: TextStyle(fontWeight: FontWeight.bold),
),
bodyWidget: const Text(
"Allow App to access your contact, this will let app synchronize all your friends with your contact list.",
),
),
confirmButtonText: 'Allow',
secondButtonText: 'Deny',
cancelButtonText: 'Learn More',
animationType: AnimationTypes.slideAnimation,
backgroundColor: Colors.white,
).show(context);
警告弹窗
ElegantAlertDialog.caution(
confirmButtonText: 'Delete',
cancelButtonText: 'Cancel',
onConfirmButtonPressed: () {},
alertContent: ElegantBodyWidget(
titleWidget: const Text(
"Are you sure you want to delete?",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
bodyWidget: const Text.rich(
TextSpan(
text: "This action cannot be undone",
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
),
children: [
TextSpan(
text:
" selected data will be permanently deleted from your device.",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.normal,
)
),
]
)
),
),
).show(context);
信息提示弹窗
ElegantAlertDialog.info(
height: 200,
withAnimation: false,
confirmButtonText: 'Confirm',
alertContent: ElegantBodyWidget(
titleWidget: const Text(
"Account updated",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
bodyWidget: const Text(
"""We've made some improvements to your account to enhance your experience.
For more information, please visit our Help Center.""",
),
),
animationType: AnimationTypes.slideAnimation,
).show(context);
自定义弹窗
ElegantAlertDialog(
borderColor: Colors.brown,
borderRadius: 0,
backgroundColor: Colors.white.withOpacity(0.8),
alertContent: ElegantBodyWidget(
titleWidget: const Text(
"Your contact list is up to date",
style: TextStyle(
color: Colors.brown,
fontWeight: FontWeight.bold,
),
),
bodyWidget: const Text(
"App has been updating all your contact list, now you can use your app with the latest features",
),
),
actions: [
TextButton(
onPressed: () {},
child: const Text(
'Close',
style: TextStyle(
color: Colors.grey,
),
),
),
],
).show(context);
完整示例
以下是一个完整的示例，展示了如何在应用程序中使用这些弹窗：
import 'package:elegant_alert_dialog/elegant_alert_dialog.dart';
import 'package:elegant_alert_dialog/resources/arrays.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(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.deepPurple,
),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Elegant Alert Dialog'),
),
body: Center(
child: GridView.count(
crossAxisCount: 2,
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
maximumSize: const Size(100, 100),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
onPressed: () {
ElegantAlertDialog.info(
height: 200,
withAnimation: false,
confirmButtonText: 'Confirm',
alertContent: ElegantBodyWidget(
titleWidget: const Text(
"Account updated",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
bodyWidget: const Text(
"""We've made some improvements to your account to enhance your experience.
For more information, please visit our Help Center.""",
),
),
animationType: AnimationTypes.slideAnimation,
).show(context);
},
child: const Text('Info'),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
maximumSize: const Size(100, 100),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
onPressed: () {
ElegantAlertDialog.caution(
confirmButtonText: 'Delete',
cancelButtonText: 'Cancel',
onConfirmButtonPressed: () {},
alertContent: ElegantBodyWidget(
titleWidget: const Text(
"Are you sure you want to delete?",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
bodyWidget: const Text.rich(
TextSpan(
text: "This action cannot be undone",
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
),
children: [
TextSpan(
text:
" selected data will be permanently deleted from your device.",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.normal,
),
),
],
),
),
),
).show(context);
},
child: const Text('Caution'),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
maximumSize: const Size(100, 100),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
onPressed: () {
ElegantAlertDialog.permission(
height: 200,
alertContent: ElegantBodyWidget(
titleWidget: const Row(
children: [
Icon(Icons.camera),
SizedBox(
width: 5,
),
Text(
'Access Camera',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
bodyWidget: const Text(
"Allow App to take pictures and videos. Capture memorable moments and share them with friends!",
),
),
confirmButtonText: 'Allow',
cancelButtonText: 'Deny',
).show(context);
},
child: const Text('Permission'),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
maximumSize: const Size(100, 100),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
onPressed: () {
ElegantAlertDialog.multiActions(
height: 180,
alertContent: ElegantBodyWidget(
titleWidget: const Text(
"Access to contact",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
bodyWidget: const Text(
"Allow App to access your contact, this will let app synchronize all your friends with your contact list.",
),
),
confirmButtonText: 'Allow',
secondButtonText: 'Deny',
cancelButtonText: 'Learn More',
animationType: AnimationTypes.slideAnimation,
backgroundColor: Colors.white,
).show(context);
},
child: const Text('Multi action'),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
maximumSize: const Size(100, 100),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
onPressed: () {
ElegantAlertDialog(
borderColor: Colors.brown,
borderRadius: 0,
backgroundColor: Colors.white.withOpacity(0.8),
alertContent: ElegantBodyWidget(
titleWidget: const Text(
"Your contact list is up to date",
style: TextStyle(
color: Colors.brown,
fontWeight: FontWeight.bold,
),
),
bodyWidget: const Text(
"App has been updating all your contact list, now you can use your app with the latest features",
),
),
actions: [
TextButton(
onPressed: () {},
child: const Text(
'Close',
style: TextStyle(
color: Colors.grey,
),
),
),
],
).show(context);
},
child: const Text('Custom alert'),
),
],
),
),
);
}
}
更多关于Flutter优雅弹窗插件elegant_alert_dialog的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter优雅弹窗插件elegant_alert_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
elegant_alert_dialog 是一个 Flutter 插件，它提供了比默认 AlertDialog 更美观和可定制的弹窗。使用这个插件，你可以轻松地创建各种风格的弹窗，包括带有图标、按钮和自定义布局的弹窗。以下是 elegant_alert_dialog 的基本使用方法。
1. 添加依赖
首先，在你的 pubspec.yaml 文件中添加 elegant_alert_dialog 依赖：
dependencies:
flutter:
sdk: flutter
elegant_alert_dialog: ^1.0.0
然后运行 flutter pub get 来安装依赖。
2. 基本使用
elegant_alert_dialog 提供了一个 ElegantAlertDialog 类，你可以使用它来创建弹窗。以下是一个简单的例子：
import 'package:flutter/material.dart';
import 'package:elegant_alert_dialog/elegant_alert_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('Elegant Alert Dialog Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return ElegantAlertDialog(
title: Text('Alert Title'),
description: Text('This is a sample alert dialog.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Cancel'),
),
],
);
},
);
},
child: Text('Show Dialog'),
),
),
),
);
}
}
3. 自定义弹窗
ElegantAlertDialog 提供了许多自定义选项，例如设置图标、背景颜色、按钮样式等。以下是一个更复杂的例子：
import 'package:flutter/material.dart';
import 'package:elegant_alert_dialog/elegant_alert_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('Elegant Alert Dialog Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return ElegantAlertDialog(
title: Text('Custom Alert'),
description: Text('This is a custom alert dialog with an icon and background color.'),
icon: Icon(Icons.warning, color: Colors.amber),
backgroundColor: Colors.blueGrey[50],
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Cancel'),
),
],
);
},
);
},
child: Text('Show Custom Dialog'),
),
),
),
);
}
}
4. 弹窗类型
elegant_alert_dialog 还提供了几种预定义的弹窗类型，例如 success, error, info, 和 warning。你可以使用 ElegantAlertDialog.success, ElegantAlertDialog.error, ElegantAlertDialog.info, 和 ElegantAlertDialog.warning 来快速创建这些类型的弹窗。
import 'package:flutter/material.dart';
import 'package:elegant_alert_dialog/elegant_alert_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('Elegant Alert Dialog Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return ElegantAlertDialog.success(
title: Text('Success'),
description: Text('The operation was successful!'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
);
},
);
},
child: Text('Show Success Dialog'),
),
),
),
);
}
}