I am using Badges package with flutter to show no. of unseen notifications as badge for an icon in the bottom navigation bar. My bottom navbar widget

  Widget homeBottomBar() {
    final notificationNotifier =
        Provider.of<NotificationNotifier>(context, listen: false);
    ProfileModel profile = profileNotifier(true).profile;
    var _unseenCount;

    return Container(
      height: MediaQuery.of(context).size.height * 0.072,
      decoration: const BoxDecoration(
        border: Border(
          top: BorderSide(
            color: Colors.black38,
            width: 0.54,
          ),
        ),
      ),
      child: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        unselectedItemColor: Colors.grey[700],
        selectedItemColor: Colors.black,
        showSelectedLabels: true,
        showUnselectedLabels: false,
        currentIndex: bottomBarIndex,
        selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold),
        onTap: (index) => setState(() => bottomBarIndex = index),
        items: [
          const BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.house_fill), label: 'Feeds'),
          const BottomNavigationBarItem(
              icon: Icon(Icons.people_alt_rounded), label: 'People'),
          BottomNavigationBarItem(
              icon: profile.profileId.isNotEmpty
                  ? Badge(
                      child: Icon(
                        CupertinoIcons.bell_solid,
                        color: bottomBarIndex == 3 ? Colors.black : Colors.grey,
                      ),
                      badgeColor: Colors.red,
                      showBadge: _unseenCount == 0 ? false : true,
                      animationType: BadgeAnimationType.fade,
                      badgeContent: FutureBuilder(
                        future: notificationNotifier.getUnseenCount(
                            profileId: profile.profileId),
                        builder: (context, snapshot) {
                          _unseenCount = snapshot.data;
                          print(_unseenCount.runtimeType);
                          if (snapshot.connectionState ==
                              ConnectionState.waiting) {
                            return const SizedBox(
                              height: 22.5,
                              width: 0,
                            );
                          }
                          return Column(
                            children: [
                              Text(
                                _unseenCount.toString(),
                                style: const TextStyle(
                                  fontSize: 12.6,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ],
                          );
                        },
                      ),
                    )
                  : const Icon(CupertinoIcons.bell_solid),
              label: 'Notifications'),
        ],
      ),
    );
  }

I tried setting showBadge boolean with _unseenCount but that didn't help either.

This is how it looks now:

How to set the boolean showBadge correctly so that it's dynamic and gets updated if the count changes?

CodePudding user response：

You're using FutureBuilder for the badgeContent which grab the value correctly and build the badge content. However, showBadge is not placed under this builder which I believe is causing the behavior you're describing.

One possible solution will be moving the FutureBuilder up one level to rebuild the entire Badge widget once the future is done