Flutter桌面通知插件atom_notifier的使用

Flutter桌面通知插件atom_notifier的使用

atom_notifier 是一个用于Flutter的状态管理库，它提供了一个更友好和语义化的语法来管理应用的状态。虽然这个库本身并不是专门用于桌面通知的插件，但它可以与其他通知插件结合使用，帮助你更好地管理通知相关的状态。

在本文中，我们将详细介绍如何使用 atom_notifier 来管理桌面通知的状态，并提供一个完整的示例Demo。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 atom_notifier 作为依赖：

dependencies:
  atom_notifier: 1.1.1

或者，你可以在终端中运行以下命令来添加依赖：

flutter pub add atom_notifier

然后，确保你已经导入了 atom_notifier：

import 'package:atom_notifier/atom_notifier.dart';

2. 创建一个简单的桌面通知示例

为了演示如何使用 atom_notifier 来管理桌面通知的状态，我们假设你已经在项目中集成了一个桌面通知插件（例如 flutter_local_notifications）。我们将使用 atom_notifier 来管理通知的状态（例如：是否显示通知、通知的内容等）。

2.1 安装 flutter_local_notifications

首先，确保你已经安装了 flutter_local_notifications 插件。你可以在 pubspec.yaml 中添加以下依赖：

dependencies:
  flutter_local_notifications: ^13.0.0

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

2.2 初始化通知服务

在 main.dart 中初始化通知服务：

import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:atom_notifier/atom_notifier.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化通知服务
  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
  const AndroidInitializationSettings initializationSettingsAndroid = AndroidInitializationSettings('@mipmap/ic_launcher');
  final InitializationSettings initializationSettings = InitializationSettings(
    android: initializationSettingsAndroid,
  );
  await flutterLocalNotificationsPlugin.initialize(initializationSettings);

  runApp(MyApp(flutterLocalNotificationsPlugin: flutterLocalNotificationsPlugin));
}

class MyApp extends StatelessWidget {
  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

  const MyApp({Key? key, required this.flutterLocalNotificationsPlugin}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Desktop Notifications',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NotificationScreen(flutterLocalNotificationsPlugin: flutterLocalNotificationsPlugin),
    );
  }
}

2.3 使用 atom_notifier 管理通知状态

接下来，我们创建一个 NotificationAtom 来管理通知的状态。我们将使用 AtomNotifier 来跟踪通知是否已发送以及通知的内容。

class NotificationAtom {
  final AtomNotifier<String> notificationMessage;
  final AtomNotifier<bool> isNotificationSent;

  NotificationAtom()
      : notificationMessage = AtomNotifier(""),
        isNotificationSent = AtomNotifier(false);
}

2.4 创建通知页面

在 NotificationScreen 中，我们将使用 AtomObserver 来监听 NotificationAtom 的状态变化，并根据状态显示不同的UI。

class NotificationScreen extends StatefulWidget {
  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

  const NotificationScreen({Key? key, required this.flutterLocalNotificationsPlugin}) : super(key: key);

  [@override](/user/override)
  _NotificationScreenState createState() => _NotificationScreenState();
}

class _NotificationScreenState extends State<NotificationScreen> {
  late NotificationAtom _notificationAtom;

  [@override](/user/override)
  void initState() {
    super.initState();
    _notificationAtom = NotificationAtom();
  }

  Future<void> _showNotification(String message) async {
    // 更新通知消息
    _notificationAtom.notificationMessage.set(message);

    // 显示本地通知
    const AndroidNotificationDetails androidPlatformChannelSpecifics = AndroidNotificationDetails(
      'your_channel_id',
      'your_channel_name',
      importance: Importance.max,
      priority: Priority.high,
      showWhen: false,
    );
    const NotificationDetails platformChannelSpecifics = NotificationDetails(android: androidPlatformChannelSpecifics);
    await widget.flutterLocalNotificationsPlugin.show(0, 'New Notification', message, platformChannelSpecifics);

    // 标记通知已发送
    _notificationAtom.isNotificationSent.set(true);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Desktop Notifications with Atom Notifier'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () => _showNotification("Hello from Flutter!"),
              child: const Text('Send Notification'),
            ),
            SizedBox(height: 20),
            // 使用 AtomObserver 监听通知消息的变化
            AtomObserver<String>(
              atom: _notificationAtom.notificationMessage,
              builder: (context, message) {
                return Text(
                  "Notification Message: $message",
                  style: TextStyle(fontSize: 18),
                );
              },
            ),
            SizedBox(height: 20),
            // 使用 AtomObserver 监听通知是否已发送
            AtomObserver<bool>(
              atom: _notificationAtom.isNotificationSent,
              builder: (context, isSent) {
                return Text(
                  isSent ? "Notification Sent" : "No Notification Sent",
                  style: TextStyle(fontSize: 18, color: isSent ? Colors.green : Colors.red),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}