Support for badges on the NavbarItem

example/lib/main.dart

@@ -1,6 +1,8 @@
 import 'dart:async';
 import 'dart:developer';
+import 'dart:math' hide log;
 
+import 'package:badges/badges.dart';
 import 'package:example/app_controller.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -106,19 +108,30 @@ class _HomePageState extends ConsumerState<HomePage> {
         selectedIcon: const Icon(
           Icons.home,
           size: 26,
+        ),
+        badge: const NavbarBadge(
+          badgeText: "11",
+          showBadge: true,
         )),
     NavbarItem(Icons.shopping_bag_outlined, 'Products',
         backgroundColor: colors[1],
         selectedIcon: const Icon(
           Icons.shopping_bag,
           size: 26,
+        ),
+        badge: const NavbarBadge(
+          badgeText: "8",
+          showBadge: true,
         )),
     NavbarItem(Icons.person_outline, 'Me',
         backgroundColor: colors[2],
         selectedIcon: const Icon(
           Icons.person,
           size: 26,
-        )),
+        ),
+        // dot badge
+        badge: const NavbarBadge(
+            badgeText: "", showBadge: true, color: Colors.amber)),
     NavbarItem(Icons.settings_outlined, 'Settings',
         backgroundColor: colors[0],
         selectedIcon: const Icon(
@@ -755,11 +768,88 @@ class _SettingsState extends State<Settings> {
                       index = x;
                     });
                     appSetting.changeThemeSeed(themeColorSeed[index.toInt()]);
-                  })
+                  }),
+              const SizedBox(
+                height: 40,
+              ),
+              ElevatedButton(
+                  onPressed: () {
+                    showRandomBadges();
+                  },
+                  child: const Text('Show Random Badges'))
             ],
           ),
         ));
   }
+
+  showRandomBadges() {
+    var anims = [
+      BadgeAnimation.fade,
+      BadgeAnimation.rotation,
+      BadgeAnimation.scale,
+      BadgeAnimation.size,
+      BadgeAnimation.slide
+    ];
+    var pos = [
+      BadgePosition.bottomEnd,
+      BadgePosition.bottomStart,
+      BadgePosition.topEnd,
+      BadgePosition.topStart
+    ];
+    int r = Random().nextInt(100);
+    var b = Random().nextBool();
+    NavbarNotifier.updateBadge(
+        0,
+        NavbarBadge(
+            badgeText: "${b ? r : ""}",
+            color: b
+                ? null
+                : themeColorSeed[Random().nextInt(themeColorSeed.length)],
+            position: pos[Random().nextInt(pos.length)](),
+            showBadge: Random().nextInt(5) > 1,
+            badgeAnimation: anims[Random().nextInt(anims.length)](),
+            animationDuration:
+                Duration(milliseconds: (Random().nextInt(5) + 5) * 600)));
+    b = Random().nextBool();
+    NavbarNotifier.updateBadge(
+        1,
+        NavbarBadge(
+            badgeText: "${b ? r : ""}",
+            position: pos[Random().nextInt(pos.length)](),
+            color: b
+                ? null
+                : themeColorSeed[Random().nextInt(themeColorSeed.length)],
+            showBadge: Random().nextInt(5) > 1,
+            badgeAnimation: anims[Random().nextInt(anims.length)](),
+            animationDuration:
+                Duration(milliseconds: (Random().nextInt(5) + 5) * 600)));
+    b = Random().nextBool();
+    NavbarNotifier.updateBadge(
+        2,
+        NavbarBadge(
+            badgeText: "${b ? r : ""}",
+            position: pos[Random().nextInt(pos.length)](),
+            color: b
+                ? null
+                : themeColorSeed[Random().nextInt(themeColorSeed.length)],
+            showBadge: Random().nextInt(5) > 1,
+            badgeAnimation: anims[Random().nextInt(anims.length)](),
+            animationDuration:
+                Duration(milliseconds: (Random().nextInt(5) + 5) * 600)));
+    b = Random().nextBool();
+    NavbarNotifier.updateBadge(
+        3,
+        NavbarBadge(
+            badgeText: "${b ? r : ""}",
+            position: pos[Random().nextInt(pos.length)](),
+            color: b
+                ? null
+                : themeColorSeed[Random().nextInt(themeColorSeed.length)],
+            showBadge: Random().nextInt(5) > 1,
+            badgeAnimation: anims[Random().nextInt(anims.length)](),
+            animationDuration:
+                Duration(milliseconds: (Random().nextInt(5) + 5) * 600)));
+  }
 }
 
 class ProfileEdit extends StatelessWidget {

example/pubspec.yaml

@@ -12,6 +12,7 @@ dependencies:
     path: ../
   flutter:
     sdk: flutter
+  badges:
 
   cupertino_icons: ^1.0.2
   flutter_riverpod: ^2.4.9

lib/navbar_router.dart

@@ -4,3 +4,4 @@ export 'src/navbar_router.dart';
 export 'src/navbar_notifier.dart';
 export 'src/navbar_decoration.dart';
 export 'src/navigate.dart';
+export 'src/navbar_badge.dart';

lib/src/animated_navbar.dart

@@ -10,6 +10,45 @@ const double kFloatingNavbarHeight = 60.0;
 /// The height of the navbar based on the [NavbarType]
 double kNavbarHeight = 0.0;
 
+/// Function to build badges, using index and child from the [NavbarNotifier.badges] list (given by user)
+Widget buildBadge(
+  /// Current index of the navbar
+  int index,
+
+  /// The navbar icon
+  Widget child,
+) {
+  return badges.Badge(
+    key: NavbarNotifier.badges[index].key,
+    position: NavbarNotifier.badges[index].position ??
+        (NavbarNotifier.badges[index].badgeText.isNotEmpty
+            ? badges.BadgePosition.topEnd(top: -15, end: -15)
+            : badges.BadgePosition.topEnd()),
+    badgeAnimation: NavbarNotifier.badges[index].badgeAnimation ??
+        badges.BadgeAnimation.slide(
+          animationDuration: NavbarNotifier.badges[index].animationDuration,
+          // disappearanceFadeAnimationDuration: Duration(milliseconds: 200),
+          // curve: Curves.easeInCubic,
+        ),
+    ignorePointer: NavbarNotifier.badges[index].ignorePointer,
+    stackFit: NavbarNotifier.badges[index].stackFit,
+    onTap: NavbarNotifier.badges[index].onTap,
+    showBadge: NavbarNotifier.badges[index].showBadge,
+    badgeStyle: badges.BadgeStyle(
+      badgeColor: NavbarNotifier.badges[index].color ?? Colors.white,
+    ),
+    badgeContent: NavbarNotifier.badges[index].badgeContent ??
+        Text(
+          NavbarNotifier.badges[index].badgeText,
+          style: NavbarNotifier.badges[index].badgeTextStyle ??
+              TextStyle(
+                  color: NavbarNotifier.badges[index].textColor ?? Colors.black,
+                  fontSize: 9),
+        ),
+    child: child,
+  );
+}
+
 class _AnimatedNavBar extends StatefulWidget {
   const _AnimatedNavBar(
       {Key? key,
@@ -335,12 +374,13 @@ class _AnimatedNavBarState extends State<_AnimatedNavBar>
           extended: navigationRailDefaultDecoration.isExtended,
           backgroundColor: navigationRailDefaultDecoration.backgroundColor ??
               theme.colorScheme.surface,
-          destinations: widget.menuItems.map((NavbarItem menuItem) {
-            return NavigationRailDestination(
-              icon: Icon(menuItem.iconData),
-              label: Text(menuItem.text),
-            );
-          }).toList(),
+          destinations: [
+            for (int i = 0; i < widget.menuItems.length; i++)
+              NavigationRailDestination(
+                icon: buildBadge(i, Icon(widget.menuItems[i].iconData)),
+                label: Text(widget.menuItems[i].text),
+              )
+          ],
           selectedIndex: NavbarNotifier.currentIndex);
     }
 
@@ -441,12 +481,13 @@ class StandardNavbarState extends State<StandardNavbar> {
             BottomNavigationBarItem(
               backgroundColor: items[index].backgroundColor,
               icon: _selectedIndex == index
-                  ? items[index].selectedIcon ??
-                      Icon(
-                        items[index].iconData,
-                      )
-                  : Icon(
-                      items[index].iconData,
+                  ? buildBadge(
+                      index,
+                      items[index].selectedIcon ?? Icon(items[index].iconData),
+                    )
+                  : buildBadge(
+                      index,
+                      Icon(items[index].iconData),
                     ),
               label: items[index].text,
             )
@@ -592,13 +633,15 @@ class NotchedNavBarState extends State<NotchedNavBar>
             ),
           ],
         ),
-        child: widget.menuItems[NavbarNotifier.currentIndex].selectedIcon ??
-            Icon(
-              widget.menuItems[NavbarNotifier.currentIndex].iconData,
-              color: widget.decoration.selectedIconColor,
-              size: (widget.decoration.selectedIconTheme?.size ?? 24.0) *
-                  scaleAnimation.value,
-            ));
+        child: buildBadge(
+            NavbarNotifier.currentIndex,
+            widget.menuItems[NavbarNotifier.currentIndex].selectedIcon ??
+                Icon(
+                  widget.menuItems[NavbarNotifier.currentIndex].iconData,
+                  color: widget.decoration.selectedIconColor,
+                  size: (widget.decoration.selectedIconTheme?.size ?? 24.0) *
+                      scaleAnimation.value,
+                )));
   }
 
   @override
@@ -651,6 +694,7 @@ class NotchedNavBarState extends State<NotchedNavBar>
                             alignment: Alignment.center,
                             height: 80,
                             child: MenuTile(
+                              index: i,
                               item: widget.menuItems[i],
                               decoration: widget.decoration,
                             ),
@@ -667,20 +711,27 @@ class NotchedNavBarState extends State<NotchedNavBar>
 class MenuTile extends StatelessWidget {
   final NavbarDecoration decoration;
   final NavbarItem item;
+  final int index;
 
-  const MenuTile({super.key, required this.item, required this.decoration});
+  const MenuTile(
+      {super.key,
+      required this.item,
+      required this.decoration,
+      required this.index});
 
   @override
   Widget build(BuildContext context) {
     if (item.child != null) return item.child!;
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        Icon(
-          item.iconData,
-          color:
-              decoration.unselectedIconColor ?? decoration.unselectedItemColor,
-        ),
+        buildBadge(
+            index,
+            Icon(
+              item.iconData,
+              color: decoration.unselectedIconColor ??
+                  decoration.unselectedItemColor,
+            )),
         const SizedBox(
           height: 6,
         ),
@@ -836,14 +887,18 @@ class M3NavBarState extends State<M3NavBar> {
             indicatorColor: widget.decoration.indicatorColor,
             indicatorShape: widget.decoration.indicatorShape,
             labelBehavior: widget.labelBehavior,
-            destinations: widget.items.map((e) {
-              return NavigationDestination(
-                tooltip: e.text,
-                icon: Icon(e.iconData),
-                label: e.text,
-                selectedIcon: e.selectedIcon ?? Icon(e.iconData),
-              );
-            }).toList(),
+            destinations: [
+              for (int i = 0; i < widget.items.length; i++)
+                NavigationDestination(
+                  tooltip: widget.items[i].text,
+                  icon: buildBadge(i, Icon(widget.items[i].iconData)),
+                  label: widget.items[i].text,
+                  selectedIcon: buildBadge(
+                      i,
+                      widget.items[i].selectedIcon ??
+                          Icon(widget.items[i].iconData)),
+                )
+            ],
             selectedIndex: NavbarNotifier.currentIndex,
             onDestinationSelected: (int index) => widget.onItemTapped!(index)),
       ),
@@ -985,9 +1040,11 @@ class FloatingNavbarState extends State<FloatingNavbar> {
                               mainAxisAlignment: MainAxisAlignment.center,
                               children: [
                                 _selectedIndex == i
-                                    ? widget.items[i].selectedIcon ??
-                                        _unselectedIcon(i)
-                                    : _unselectedIcon(i),
+                                    ? buildBadge(
+                                        i,
+                                        widget.items[i].selectedIcon ??
+                                            _unselectedIcon(i))
+                                    : buildBadge(i, _unselectedIcon(i)),
                                 if (widget.decoration.showSelectedLabels! &&
                                     widget.index == i)
                                   Text(