Flutter弹出提示框插件art_sweetalert_new的使用

Art Sweet Alert New

ArtSweetAlertNew 是一个增强版的 Flutter 包，用于创建美观、可定制且带有动画效果的弹出对话框。该库是对原始 ArtSweetAlert 包的改进版本，提供了更好的定制选项、更平滑的动画效果以及更现代的设计方法。

特性

• 五种警报类型：成功、错误、警告、信息和问题警报，并带有独特的图标。
• 平滑动画：优雅的缩放和淡入淡出动画，具有可自定义的持续时间。
• 高度可定制：灵活的样式选项，包括颜色、大小和布局。
• 现代设计：干净、专业的警报，遵循 Material Design 原则。
• 响应式：无缝适应不同的屏幕尺寸。
• 易于使用：简单的 API，便于快速实现。
• 屏障控制：可选的点击外部区域以取消功能。

安装

在你的项目 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  art_sweetalert_new: ^1.0.0

然后运行：

flutter pub get

基本用法

import 'package:art_sweetalert_new/art_sweetalert_new.dart';

// 显示一个简单的成功警报
ArtSweetAlert.show(
  context: context,
  title: Text('成功！'),
  type: ArtAlertType.success,
);

// 显示一个带自定义操作的警报
ArtSweetAlert.show(
  context: context,
  title: Text('确认操作'),
  content: Text('你确定要继续吗？'),
  type: ArtAlertType.question,
  actions: [
    ArtAlertButton(
      onPressed: () => Navigator.pop(context, false),
      child: Text('取消'),
      backgroundColor: Colors.grey,
    ),
    ArtAlertButton(
      onPressed: () => Navigator.pop(context, true),
      child: Text('确认'),
    ),
  ],
);

自定义选项

警报类型

• ArtAlertType.success: 绿色对勾图标
• ArtAlertType.error: 红色叉号图标
• ArtAlertType.warning: 橙色感叹号
• ArtAlertType.info: 蓝色信息图标
• ArtAlertType.question: 蓝色问号图标

样式定制

ArtSweetAlert.show(
  context: context,
  title: Text('自定义样式'),
  backgroundColor: Colors.grey[100],
  borderRadius: 12.0,
  iconSize: 100.0,
  animationDuration: Duration(milliseconds: 800),
  padding: EdgeInsets.all(32),
  barrierDismissible: false,
);

按钮定制

ArtAlertButton(
  onPressed: () {},
  child: Text('自定义按钮'),
  backgroundColor: Colors.purple,
  textColor: Colors.white,
  padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
  elevation: 2,
);

对比原包的优势

• 改进的动画系统，使过渡更加平滑。
• 更多的警报样式定制选项。
• 改进的图标设计，提供更好的视觉反馈。
• 更好的类型安全性和空安全性支持。
• 现代化的 API 设计。
• 改进的性能和减少的包体积。
• 更好的错误处理和调试支持。

需求

• Flutter SDK: >=2.17.0
• Dart SDK: >=2.17.0

贡献

欢迎贡献！请随时提交拉取请求。对于重大更改，请先打开一个问题讨论你想要进行的更改。

高级定制

自定义图标

你可以通过修改动画持续时间和大小来定制警报图标：

ArtSweetAlert.show(
  context: context,
  type: ArtAlertType.success,
  iconSize: 120.0,
  animationDuration: Duration(milliseconds: 800),
);

对话框定制

创建完全自定义的对话框，使用自己的小部件：

ArtSweetAlert.show(
  context: context,
  title: Column(
    children: [
      Icon(Icons.cloud_done, size: 48),
      SizedBox(height: 8),
      Text('自定义头部'),
    ],
  ),
  content: Container(
    padding: EdgeInsets.all(16),
    child: YourCustomWidget(),
  ),
);

主题集成

警报对话框会自动与你的应用程序主题集成：

ArtSweetAlert.show(
  context: context,
  title: Text('主题化警报'),
  backgroundColor: Theme.of(context).cardColor,
  actions: [
    ArtAlertButton(
      child: Text('确定'),
      backgroundColor: Theme.of(context).primaryColor,
    ),
  ],
);

响应处理

基本响应处理

final response = await ArtSweetAlert.show(
  context: context,
  title: Text('删除项目'),
  content: Text('你确定吗？'),
  type: ArtAlertType.warning,
  actions: [
    ArtAlertButton(
      onPressed: () => Navigator.pop(context, false),
      child: Text('取消'),
    ),
    ArtAlertButton(
      onPressed: () => Navigator.pop(context, true),
      child: Text('删除'),
      backgroundColor: Colors.red,
    ),
  ],
);

if (response == true) {
  // 用户确认删除
} else {
  // 用户取消或关闭了对话框
}

多个操作处理

enum UserChoice { approve, reject, review }

final choice = await ArtSweetAlert.show<UserChoice>(
  context: context,
  title: Text('审查文档'),
  type: ArtAlertType.question,
  actions: [
    ArtAlertButton(
      onPressed: () => Navigator.pop(context, UserChoice.approve),
      child: Text('批准'),
      backgroundColor: Colors.green,
    ),
    ArtAlertButton(
      onPressed: () => Navigator.pop(context, UserChoice.reject),
      child: Text('拒绝'),
      backgroundColor: Colors.red,
    ),
    ArtAlertButton(
      onPressed: () => Navigator.pop(context, UserChoice.review),
      child: Text('需要审查'),
      backgroundColor: Colors.orange,
    ),
  ],
);