Question

我正在使用FCM在Flutter应用中推送通知。

我尝试了很多事情和代码，以便在收到新通知且应用程序关闭或处于后台时，在应用程序图标的顶部显示徽章（红点）。

我应该怎么做才能在徽章中显示徽章应用程序图标？

Answer 1

迟到的答案，但是，对于您的问题，我认为您想为应用程序图标添加计数，如下图所示。

因此对于此问题，您可以使用 flutter_app_badger。使用此包，您可以为应用图标添加计数。

要将 flutter_app_badger 与 FCM 一起使用，您可以使用它

 _firebaseMessaging.configure(
  onMessage: (Map<String, dynamic> message) async {
    print("onMessage: $message");
    //Here you can add the count when you get a notification you can increase the number by one
    FlutterAppBadger.updateBadgeCount(1);
  },
  onBackgroundMessage: myBackgroundMessageHandler,
  onLaunch: (Map<String, dynamic> message) async {
    print("onLaunch: $message");
    //Here you can remove the badge you created when it's launched
    FlutterAppBadger.removeBadge();
  },
  onResume: (Map<String, dynamic> message) async {
    print("onResume: $message");
  },
);

然后你也可以把它添加到后台通知处理程序

Future<dynamic> myBackgroundMessageHandler(Map<String, dynamic> message) async {
   //Here you can add 
   FlutterAppBadger.updateBadgeCount(1);

   ...
   // Or do other work.
}

请记住，只有当有效负载上没有通知时，才会触发 ios 后台处理程序。您可以在我的 answer 上阅读有关此问题的更多信息。

Answer 2

如果您使用的是firebase_messaging软件包，则需要使用以下代码来处理消息：

_firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");
        _showItemDialog(message);
      },
      onBackgroundMessage: myBackgroundMessageHandler,
      onLaunch: (Map<String, dynamic> message) async {
        print("onLaunch: $message");
        _navigateToItemDetail(message);
      },
      onResume: (Map<String, dynamic> message) async {
        print("onResume: $message");
        _navigateToItemDetail(message);
      },
    );

在此功能中，您可以更新图标的状态以显示许多通知。

_firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");
        setState((){
           notification_counter++;
        });
        _showItemDialog(message);
      },
      onBackgroundMessage: myBackgroundMessageHandler,
      onLaunch: (Map<String, dynamic> message) async {
        print("onLaunch: $message");
        setState((){
           notification_counter++;
        });
        _navigateToItemDetail(message);
      },
      onResume: (Map<String, dynamic> message) async {
        print("onResume: $message");
        setState((){
           notification_counter++;
        });
        _navigateToItemDetail(message);
      },
    );

如何使用Flutter在应用程序图标上显示通知徽章？

2 个答案: