flutter_app_badger如何实现应用角标功能

如何在Flutter中使用flutter_app_badger插件实现应用角标功能？我在iOS和Android平台上测试时发现角标显示不一致，iOS能正常显示但Android没反应。是否需要额外配置？求具体实现代码和兼容性解决方案。

2 回复

Flutter应用角标功能可通过flutter_app_badger插件实现。步骤：

  1. 添加依赖到pubspec.yaml。
  2. 导入包并调用API，如FlutterAppBadger.updateBadgeCount(5)。
  3. 支持Android（需启动器支持）和iOS（需配置权限）。

更多关于flutter_app_badger如何实现应用角标功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter应用角标功能可以通过flutter_app_badger插件实现，支持Android和iOS平台。以下是具体实现步骤和代码示例：

1. 添加依赖

在pubspec.yaml中添加依赖：

dependencies:
  flutter_app_badger: ^1.4.0

2. 安装插件

执行命令：

flutter pub get

3. 平台配置

Android配置：

  • 在android/app/src/main/AndroidManifest.xml的<activity>标签内添加：
<intent-filter>
    <action android:name="android.intent.action.MAIN"/>
    <category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
<!-- 添加以下权限（仅限华为/小米等国产设备） -->
<meta-data
    android:name="com.leeson.badger.ENABLE"
    android:value="true"/>

iOS配置：

  • 在ios/Runner/Info.plist中添加权限说明：
<key>UIBackgroundModes</key>
<array>
    <string>remote-notification</string>
</array>

4. 代码实现

import 'package:flutter_app_badger/flutter_app_badger.dart';

class BadgeHelper {
  // 检查设备是否支持角标
  static Future<bool> isSupported() async {
    return await FlutterAppBadger.isAppBadgeSupported();
  }

  // 更新角标数量
  static void updateBadge(int count) async {
    if (await isSupported()) {
      FlutterAppBadger.updateBadgeCount(count);
    }
  }

  // 移除角标
  static void removeBadge() async {
    if (await isSupported()) {
      FlutterAppBadger.removeBadge();
    }
  }
}

// 使用示例
FloatingActionButton(
  onPressed: () {
    BadgeHelper.updateBadge(5); // 设置角标数为5
  },
  child: Icon(Icons.add),
)

5. 注意事项

  • iOS：需要真机测试，模拟器不支持角标功能
  • Android：不同厂商设备支持程度不同（原生Android默认不支持，需依赖厂商定制）
  • 华为/小米/三星等设备需要额外适配，插件已内置部分机型适配

常用方法说明

  • FlutterAppBadger.updateBadgeCount(count)：更新角标数字
  • FlutterAppBadger.removeBadge()：清除角标
  • FlutterAppBadger.isAppBadgeSupported()：检查支持情况

通过以上步骤即可实现基本的应用角标功能，建议在实际使用前先检测设备支持情况。

回到顶部