Flutter应用角标管理插件app_badge_plus的使用

插件简介

app_badge_plus 是一个Flutter插件，允许开发者为应用程序图标添加角标（badge）。这些角标通常用于指示未读消息、新通知等信息的数量。

支持平台

• iOS
• Android (包括但不限于以下厂商设备的支持情况)
  • Samsung (pass)
  • Oppo (pass)
  • Vivo (pass)
  • Huawei (pass)
  • Xiaomi
  • LG
  • Sony
  • HTC
  • ZTX

关键特性说明

Android 特性

从Android 8.0（API level 26）开始，通知角标作为一项新功能被引入。用户可以通过长按应用图标来查看通知详情或快捷方式。自Android 13（API level 33）起，在设置应用角标前需请求通知运行时权限。

根据需要支持的系统，在AndroidManifest.xml中添加相应的权限声明：

<!-- 示例：针对不同品牌的权限声明 -->
<uses-permission android:name="com.sec.android.provider.badge.permission.READ"/>
<uses-permission android:name="com.sec.android.provider.badge.permission.WRITE"/>
...

iOS 特性

在iOS平台上，启用角标功能同样依赖于通知权限。

权限管理

推荐使用permission_handler包来处理跨平台的通知权限申请。 permission_handler

使用方法

添加依赖

首先，在项目的pubspec.yaml文件中添加app_badge_plus依赖：

dependencies:
  app_badge_plus: ^1.1.2

基本操作示例

以下是基本的操作示例代码，演示如何设置、移除角标以及检查是否支持角标功能：

import 'package:app_badge_plus/app_badge_plus.dart';

// 设置角标数值
AppBadgePlus.updateBadge(5);

// 移除角标
AppBadgePlus.updateBadge(0);

// 检查当前启动器是否支持角标功能
bool isSupported = await AppBadgePlus.isSupported();

完整示例Demo

下面是一个完整的示例项目代码，展示了如何结合flutter_local_notifications和permission_handler来实现通知与角标的动态更新。

main.dart

import 'package:app_badge_plus/app_badge_plus.dart';
import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:permission_handler/permission_handler.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int count = 0;
  bool isSupported = false;
  bool isNotificationAllowed = false;

  @override
  void initState() {
    super.initState();
    allowNotification();
    AppBadgePlus.isSupported().then((value) {
      isSupported = value;
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('App Badge Plus is supported: $isSupported\n'),
              Text('Notification permission: $isNotificationAllowed\n'),
              TextButton(
                onPressed: () {
                  showNotification();
                },
                child: const Text('Show Notification'),
              ),
              TextButton(
                onPressed: () {
                  count = 0;
                  AppBadgePlus.updateBadge(0);
                },
                child: const Text('Clear Notification'),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            count += 1;
            AppBadgePlus.updateBadge(count);
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }

  void allowNotification() async {
    if (await Permission.notification.isGranted) {
      isNotificationAllowed = true;
      setState(() {});
    } else {
      await Permission.notification.request().then((value) {
        if (value.isGranted) {
          isNotificationAllowed = true;
          setState(() {});
          print('Permission is granted');
        } else {
          print('Permission is not granted');
          isNotificationAllowed = false;
          setState(() {});
        }
      });
    }
  }

  void showNotification() async {
    FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
        FlutterLocalNotificationsPlugin();

    // 初始化插件配置
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('app_icon');
    final DarwinInitializationSettings initializationSettingsDarwin =
        DarwinInitializationSettings(onDidReceiveLocalNotification:
            (int id, String? title, String? body, String? payload) {
      // 回调至UI逻辑
    });
    final InitializationSettings initializationSettings =
        InitializationSettings(
            android: initializationSettingsAndroid,
            iOS: initializationSettingsDarwin,
            macOS: initializationSettingsDarwin);

    await flutterLocalNotificationsPlugin.initialize(
      initializationSettings,
      onDidReceiveNotificationResponse: (NotificationResponse details) {},
    );

    const AndroidNotificationDetails androidNotificationDetails =
        AndroidNotificationDetails(
      'your channel id',
      'your channel name',
      channelDescription: 'your channel description',
      importance: Importance.max,
      priority: Priority.high,
      ticker: 'ticker',
      number: 1,
    );
    const NotificationDetails notificationDetails =
        NotificationDetails(android: androidNotificationDetails);
    await flutterLocalNotificationsPlugin.show(
        0, 'plain title', 'plain body', notificationDetails,
        payload: 'item x');
  }
}

通过上述步骤，您可以轻松地将app_badge_plus集成到您的Flutter项目中，并实现对应用角标的管理和控制。希望这对您有所帮助！