Flutter badges package - How to not show zero/update dynamically?

Question

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?

Answer 1

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