Flutter浮动通知插件flutter_floating_notification的使用

本文将介绍如何在Flutter项目中使用flutter_floating_notification插件来创建浮动通知。我们将通过几个简单的步骤来展示如何设置和使用这个插件。

1. 引入依赖

首先，在你的pubspec.yaml文件中添加flutter_floating_notification依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_floating_notification: ^版本号 # 请替换为最新版本号

然后运行flutter pub get以安装依赖。

2. 创建浮动通知

2.1 使用局部队列

FlutterFloatNotification() 维护一个局部队列，这意味着每个通知都会独立处理。

示例代码

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_floating_notification/flutter_floating_notification.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primary,
        foregroundColor: Colors.white,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                // 生成随机数
                final random = Random();

                final color = Color.fromARGB(
                  255,
                  random.nextInt(255),
                  random.nextInt(255),
                  random.nextInt(255),
                );

                final double randomHeight = 100 + random.nextInt(100).toDouble();

                final v = await FlutterFloatNotification().showFloatingBar<int>(
                  context,
                  childBuilder: (context, dismiss) {
                    return Container(
                      color: color,
                      height: randomHeight,
                      alignment: Alignment.center,
                      child: ElevatedButton(
                        onPressed: () => dismiss(value: color.value),
                        child: const Text('Dismiss'),
                      ),
                    );
                  },
                );

                debugPrint('v: $v');
              },
              child: const Text('Show Flush'),
            ),
          ],
        ),
      ),
    );
  }
}

2.2 使用全局队列

FlutterFloatNotification.global() 包含一个全局队列，这使得所有通知共享同一个队列，按顺序显示。

示例代码

ElevatedButton(
  onPressed: () async {
    // 生成随机数
    final random = Random();

    final color = Color.fromARGB(
      255,
      random.nextInt(255),
      random.nextInt(255),
      random.nextInt(255),
    );

    final double randomHeight = 100 + random.nextInt(100).toDouble();

    final v = await FlutterFloatNotification.global().showFloatingBar<int>(
      context,
      direction: FloatingGestureDirection.vertical,
      childBuilder: (context, FlushDismiss<int> dismiss) {
        return Container(
          color: color,
          height: randomHeight,
          alignment: Alignment.center,
          child: ElevatedButton(
            onPressed: () => dismiss(value: color.value),
            child: const Text('Dismiss Global'),
          ),
        );
      },
    );

    debugPrint('v: $v');
  },
  child: const Text('Show Global Flush'),
),