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

3
votes

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

2 Answers

1
votes

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,))
0
votes

Use Flutter App Badger plugin. This plugin for Flutter adds the ability to change the badge of the app in the launcher. It supports iOS and some Android devices (the official API does not support the feature, even on Oreo).

First, you just have to import the package in your dart files with:

import 'package:flutter_app_badger/flutter_app_badger.dart';

...then you can remove a badge:

FlutterAppBadger.removeBadge();