How can I change an Icon in flutter when i add a new Entry in my Database?

Question

So i set up a working Realtime Database, to which i can add entries. Now i want to notify the user whenever a new entry was added to the Database by adding a little Red Dot to the Icon in the BottomNavigationBar which disappears again when the user has clicked it. Any ideas on how to achieve this?

Answer 1

I recommend using the badge package to achieve this. You will have to ensure the state updates using your own state management. If the user goes to the notification screen, you will need to trigger an update to mark notifications as read.

 return Badge(
          showBadge: unreadNotifications > 0,
          badgeContent: Text(
            '$unreadNotifications',
            style: kTextStyle,
          ),
          position: const BadgePosition(
            top: -3,
            end: 3,
          ),
          child: IconButton(
            icon: const Icon(
              Icons.notifications,
            ),
            onPressed: () {
              Navigator.pushNamed(context, NotificationScreen.id);
            },
          ),
        );