Flutter浮动层管理插件nice_overlay的使用

nice_overlay 是一个用于控制应用内通知、吐司提示和零食条等覆盖组件的Flutter包。它支持所有平台，仅用Dart实现，并提供了丰富的自定义选项以满足不同的需求。

Features

• In App Notification | Snack Bar | Toast

  | |

• 支持所有平台（仅使用Dart实现）

• 提供多种类型的覆盖层

  • 应用内通知
  • 吐司提示
  • 零食条

• 多样的覆盖层控制功能

  • 设置显示优先级
  • 显示
  • 关闭
  • 关闭所有
  • 排队等待显示
  • 清除队列
  • 是否可被滑动关闭

• 易于定制化

  • 动画效果
  • 持续时间
  • 阴影
  • 震动反馈
  • 背景颜色
  • 等等…

如何使用

添加依赖

在你的 pubspec.yaml 文件中添加 nice_overlay 依赖：

dependencies:
  nice_overlay: ^latest_version

导入包

在需要使用的Dart文件中导入 nice_overlay 包：

import 'package:nice_overlay/nice_overlay.dart';

初始化NiceOverlay

创建一个全局的 NavigatorState 的 GlobalKey 并调用 NiceOverlay.init() 方法初始化：

GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
NiceOverlay.init(navigatorKey);

设置MaterialApp的navigatorKey属性

将我们创建的 navigatorKey 设置为 MaterialApp 的 navigatorKey 属性：

MaterialApp(
    navigatorKey: navigatorKey,
    // ...
);

显示覆盖层

通过调用 NiceOverlay 类的静态方法来显示不同类型的覆盖层：

// in-app notification
NiceOverlay.showInAppNotification(
    NiceInAppNotification(
        title: const Text('In app notification'),
        body: const Text('What a nice in app notification!'),
    ),
);

// snack bar
NiceOverlay.showSnackBar(
    NiceSnackBar(
        message: Text('What a nice snack bar!'),
        action: GestureDetector(
            onTap: NiceOverlay.closeSnackBar,
            child: const Text('close'),
        ),
    ),
);

// toast
NiceOverlay.showToast(
    NiceToast(
        message: const Text('What a nice toast!'),
    ),
);

示例代码

下面是一个完整的示例应用程序，演示了如何使用 nice_overlay 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
    NiceOverlay.init(navigatorKey);
    return MaterialApp(
      navigatorKey: navigatorKey,
      title: 'NiceOverlay Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(title: Text('NiceOverlay Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => NiceOverlay.showInAppNotification(
                  NiceInAppNotification(
                    title: const Text('In app notification'),
                    body: const Text('What a nice in app notification!'),
                    onTap: () => debugPrint('Tap on InAppNotification'),
                  ),
                ),
                child: const Text('Show NiceInAppNotification'),
              ),
              ElevatedButton(
                onPressed: () => NiceOverlay.showSnackBar(
                  NiceSnackBar(
                    message: const Text('What a nice snack bar!'),
                    action: GestureDetector(
                      onTap: NiceOverlay.closeSnackBar,
                      child: const Text('close'),
                    ),
                  ),
                ),
                child: const Text('Show NiceSnackBar'),
              ),
              ElevatedButton(
                onPressed: () => NiceOverlay.showToast(
                  NiceToast(
                    message: const Text('What a nice toast!'),
                    onTap: () => debugPrint('Tap on Toast'),
                  ),
                ),
                child: const Text('Show NiceToast'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这段代码展示了如何在Flutter项目中集成并使用 nice_overlay 插件来展示不同类型的通知信息。希望这能帮助你更好地理解和使用这个强大的工具！