Flutter 通知计数，然后在读取时隐藏徽章并在推送新通知时显示答案

【问题标题】：Flutter notification count then hide badge when its read and show when new notifications pushedFlutter 通知计数，然后在读取时隐藏徽章并在推送新通知时显示
【发布时间】：2020-10-10 18:25:09
【问题描述】：

我为通知编写了代码，上面有一个徽章。在徽章上，我有总数的通知。我如何计算已读和未读通知？或在用户单击通知图标时删除徽章，然后在推送时显示徽章和新通知的数量。这是我的代码：

// 这里我有一个通知图标和徽章，上面有通知总数

 Center(
        child: InkWell(
          onTap: () {
            if (currentUser.value.apiToken != null) {
              Navigator.of(context).pushNamed(
                '/NotificationsWidget',
              );
            } else {
              Navigator.of(context).pushNamed('/Login');
            }
          },
          child: Container(
            child: Stack(
              alignment: AlignmentDirectional.bottomEnd,
              children: <Widget>[
                Icon(
                  Icons.notifications_none,
                  color: this.widget.iconColor,
                  size: 30,
                ),
                Positioned(
                  child: Container(
                    child: Text(
                      _con.notifications.length.toString(),
                      textAlign: TextAlign.center,
                      style: Theme.of(context).textTheme.caption.merge(
                            TextStyle(
                                color: Theme.of(context).primaryColor,
                                fontSize: 8),
                          ),
                    ),
                    padding: EdgeInsets.all(0),
                    decoration: BoxDecoration(
                        color: this.widget.labelColor,
                        borderRadius:
                            BorderRadius.all(Radius.circular(10))),
                    constraints: BoxConstraints(
                        minWidth: 13,
                        maxWidth: 13,
                        minHeight: 13,
                        maxHeight: 13),
                  ),
                ),
              ],
            ),
          ),
        ),
      );

// 这里有控制器，我正在监听通知

  void listenForNotifications({String message}) async {
    isPageLoading = true;
    setState(() {
      notifications.clear();
    });
    final Stream<model.Notification> stream = await getNotifications();
    stream.listen((model.Notification _notification) {
      setState(() {
        notifications.add(_notification);
      });
    }, onError: (a) {
      setState(() {
        isPageLoading = false;
      });
      print(a);
      scaffoldKey.currentState.showSnackBar(SnackBar(
        content: Text(S.current.verify_your_internet_connection),
      ));
    }, onDone: () {
      setState(() {
        isPageLoading = false;
      });
      if (message != null) {
        scaffoldKey.currentState.showSnackBar(SnackBar(
          content: Text(message),
        ));
      }
    });
  }

【问题讨论】：

标签： flutter push-notification notifications badge

【解决方案1】：

使用Flutter App Badger 插件。这个 Flutter 插件增加了在启动器中更改应用程序徽章的功能。它支持 iOS 和一些 Android 设备（官方 API 不支持该功能，即使在 Oreo 上也是如此）。

首先，您只需将包导入您的 dart 文件中：

import 'package:flutter_app_badger/flutter_app_badger.dart';

...然后您可以移除徽章：

FlutterAppBadger.removeBadge();

【讨论】：

【解决方案2】：

首先使用状态类中的变量来获取通知计数

int NotificationCount=1;

之后，尝试使用Badge package。如果你想隐藏徽章，你可以使用 showBadge 像这样的属性

Badge(
      showBadge: NotificationCount==0? false : true,
      badgeContent: Text(
      NotificationCount.toString(),style: (TextStyle(color: Colors.white)),),

      child: Icon(Icons.notifications,color: Colors.white,))

【讨论】：