Flutter通知覆盖插件t_overlay_notification的使用

TOverlayNotification

TOverlayNotification是一个可重用的Flutter通知覆盖小部件，用于显示成功、错误、警告和信息消息。该包允许您显示可自定义的通知，这些通知在指定时间后自动消失，并可以堆叠多个通知。

特性

• 不同类型的通知样式：成功、错误、警告和信息。
• 在可配置的时间后自动消失。
• 支持堆叠多个通知。
• 高度可定制的UI和消息内容。
• 易于集成到任何Flutter项目中。

使用方法

步骤 1: 添加依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  t_overlay_notification: ^1.1.0

步骤 2: 导入包

在您的Dart文件中导入包：

import 'package:t_overlay_notification/t_overlay_notification.dart';

步骤 3: 显示通知

使用TNotificationOverlay.show()方法显示通知：

TNotificationOverlay.show(
  context: context,  // 插入覆盖层的BuildContext。
  title: 'Success',  // 通知标题。
  message: 'This is a success notification.',  // 消息内容。
  type: NotificationType.success,  // 通知类型（成功、错误、警告、信息）。
);

函数类型

• TNotificationOverlay.success：绿色的成功消息通知。
• TNotificationOverlay.error：红色的错误消息通知。
• TNotificationOverlay.warning：黄色的警告消息通知。
• TNotificationOverlay.info：蓝色的信息消息通知。

通知类型

• NotificationType.success：绿色的成功消息通知。
• NotificationType.error：红色的错误消息通知。
• NotificationType.warning：黄色的警告消息通知。
• NotificationType.info：蓝色的信息消息通知。

自定义

您可以自定义通知的持续时间、位置和其他UI方面，如颜色、填充和边距。

TNotificationOverlay.show(
  context: context,
  title: 'Info',
  message: 'This is an info notification.',
  type: NotificationType.info,
  duration: Duration(seconds: 5),  // 自定义持续时间
);

示例用法

基本通知

要显示带有标题、副标题和自定义类型的简单通知，请使用TNotificationOverlay.show()方法：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Notification Overlay Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              TNotificationOverlay.show(
                context: context,
                title: 'Success Notification',
                subTitle: 'This is a success notification.',
                type: NotificationType.success,
                duration: Duration(seconds: 3),
                height: 80, // 调整通知的高度
                width: 350, // 调整通知的宽度
                spacing: 8, // 堆叠通知之间的间距
                position: NotificationPosition.topRight,
              );
            },
            child: Text('Show Notification'),
          ),
        ),
      ),
    );
  }
}

带滑动和淡出动画的通知

您可以自定义通知的滑入和淡出动画：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Animated Notification Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              TNotificationOverlay.show(
                context: context,
                title: 'Warning Notification',
                subTitle: 'This is a warning notification.',
                type: NotificationType.warning,
                duration: Duration(seconds: 3),
                slideInDirection: SlideDirection.left, // 从左侧滑入
                slideOutDirection: SlideDirection.left, // 向左侧滑出
                height: 80,
                width: 350,
                spacing: 10,
                position: NotificationPosition.bottomLeft,
              );
            },
            child: Text('Show Animated Notification'),
          ),
        ),
      ),
    );
  }
}

自定义通知设计

通过各种颜色选项自定义通知的外观：

TNotificationOverlay.show(
  context: context,
  title: 'Custom Notification', // 必需的标题
  subTitle: 'This is a custom-styled notification.', // 可选的副标题
  action: TextButton( // 示例操作小部件
    onPressed: () {
      print('Action clicked');
    },
    child: Text('UNDO', style: TextStyle(color: Colors.white)),
  ),
  type: NotificationType.info, // 通知类型
  backgroundColor: Colors.blueAccent, // 背景颜色
  borderColor: Colors.blue, // 边框颜色
  titleColor: Colors.white, // 标题文本颜色
  messageColor: Colors.white70, // 副标题文本颜色
  iconColor: Colors.white, // 图标颜色
  borderRadius: 10.0, // 圆角
  paddingVertical: 16.0, // 垂直填充
  paddingHorizontal: 20.0, // 水平填充
  duration: Duration(seconds: 5), // 通知持续时间
  sticky: false, // 设置为true以固定通知
  height: 100, // 通知高度
  width: 300, // 通知宽度
  spacing: 12, // 通知之间的间距
  position: NotificationPosition.topLeft, // 屏幕上的位置
  slideInDirection: SlideDirection.leftToRight, // 滑入动画方向
  slideOutDirection: SlideDirection.rightToLeft, // 滑出动画面方向
);

API参考

• show(): 使用提供的参数显示通知。
• context: 小部件的BuildContext。
• title: 通知的标题（必需）。
• subTitle: 通知的副标题（可选）。
• type: 通知类型（成功、错误、警告、信息）[默认：NotificationType.info]。
• duration: 通知显示的持续时间 [默认：Duration(seconds: 3)]。
• spacing: 堆叠通知之间的间距 [默认：10.0]。
• position: 通知在屏幕上的位置（topLeft, topRight, bottomLeft, bottomRight）。
• slideInDirection: 通知滑入的方向（可选）。
• slideOutDirection: 通知滑出的方向（可选）。
• height, width: 通知框的尺寸（可选）。
• backgroundColor, borderColor, titleColor, messageColor, iconColor: 自定义通知的颜色。
• paddingVertical, paddingHorizontal: 自定义通知的填充。
• borderRadius: 自定义通知的圆角。
• onClose: 处理通知关闭动作的回调。

注意事项

• 您可以根据需要自定义动画持续时间和滑动方向。
• slideInDirection和slideOutDirection可以设置为以下任一值：
  • SlideDirection.left
  • SlideDirection.right
  • SlideDirection.top
  • SlideDirection.bottom
• 通知在指定的持续时间后自动消失，除非通过onClose回调手动关闭。

其他信息

• 贡献: 如果您想为此项目做出贡献，请打开一个拉取请求或提交一个问题。欢迎对UI进行改进或添加新功能。
• 问题: 如果您遇到任何错误或有任何改进建议，请在存储库中提交问题。
• 支持: 该包正在积极维护，通常会在1–2个工作日内解决问题。