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

Question

I wrote code for notification and i have a badge on it. On a badge i have a total number of notifications. How can i count read and unread notifications? or remove badge when user click on notification icon and then show badge and number of new notifications when its pushed. Here is my code:

// Here i have a notification icon and badge on it with total number of notifications

 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),
                  ),
                ),
              ],
            ),
          ),
        ),
      );

// Here i have controller where i am listening notifications

  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),
        ));
      }
    });
  }

Solution

first use a variable in state class to get count of notification

int NotificationCount=1;

after that, try using Badge package. If you want to hide the badge you can use showBadge property like this

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

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