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

Flutter notification count then hide badge when its read and show when new notifications pushed

提问人:Rock 提问时间:6/20/2020 更新时间:5/22/2021 访问量:12280

问:

我写了通知代码,上面有一个徽章。在徽章上,我有通知总数。如何计算已读和未读通知?或者在用户单击通知图标时删除锁屏提醒,然后在推送时显示锁屏提醒和新通知的数量。 这是我的代码:

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

 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 推送通知 通知 徽章

评论


答:

1赞 Paulo Conde 1/25/2021 #1

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

首先,您只需使用以下命令将包导入 dart 文件中:

import 'package:flutter_app_badger/flutter_app_badger.dart';

...然后,您可以移除徽章:

FlutterAppBadger.removeBadge();
2赞 Sampath Dissanayake 5/22/2021 #2

首先,使用 State Class 中的变量来获取通知计数

int NotificationCount=1;

然后 尝试使用 Badge 包。 如果要隐藏徽章,可以使用像这样的showBadge属性

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

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