badge on work list in bottom navigation bar.

lib/ui/landing/dashboard_screen.dart

@@ -323,68 +323,74 @@ class _DashboardScreenState extends State<DashboardScreen> {
       drawer: SafeArea(
         child: AppDrawer(),
       ),
-      bottomNavigationBar: BottomNavigationBar(
+      bottomNavigationBar: SizedBox(
+        height: 70,
+        child: BottomNavigationBar(
           items: <BottomNavigationBarItem>[
             BottomNavigationBarItem(
-            icon: Padding(
+              icon: SvgPicture.asset(
-              padding: const EdgeInsets.all(4.0),
-              child: SvgPicture.asset(
                 "assets/icons/home.svg",
-                width: 20,
+                color: currentIndex == 0 ? MyColors.grey3AColor : MyColors.grey98Color,
-                height: 20,
+              ).paddingAll(4),
-              ),
-            ),
               label: LocaleKeys.home.tr(),
             ),
             BottomNavigationBarItem(
-            icon: Padding(
+              icon: SvgPicture.asset(
-              padding: const EdgeInsets.all(4.0),
-              child: SvgPicture.asset(
                 "assets/icons/create_req.svg",
-                width: 20,
+                color: currentIndex == 1 ? MyColors.grey3AColor : MyColors.grey98Color,
-                height: 20,
+              ).paddingAll(4),
-              ),
-            ),
               label: LocaleKeys.createRequest.tr(),
             ),
             BottomNavigationBarItem(
-            icon: Padding(
+              icon: Stack(
-              padding: const EdgeInsets.all(4.0),
+                alignment: Alignment.centerLeft,
-              child: SvgPicture.asset(
+                children: [
+                  SvgPicture.asset(
                     "assets/icons/work_list.svg",
-                width: 20,
+                    color: currentIndex == 2 ? MyColors.grey3AColor : MyColors.grey98Color,
-                height: 20,
+                  ).paddingAll(4),
+                  Consumer<DashboardProviderModel>(
+                    builder: (cxt, data, child) {
+                      if (data.workListCounter == 0) {
+                        return const SizedBox();
+                      }
+                      return Positioned(
+                        right: 0,
+                        top: 0,
+                        child: Container(
+                          padding: const EdgeInsets.only(left: 4, right: 4),
+                          alignment: Alignment.center,
+                          decoration: BoxDecoration(color: MyColors.redColor, borderRadius: BorderRadius.circular(17)),
+                          child: data.workListCounter.toString().toText10(color: Colors.white),
+                        ),
+                      );
+                    },
                   ),
+                ],
               ),
               label: LocaleKeys.workList.tr(),
             ),
             BottomNavigationBarItem(
-            icon: Padding(
+              icon: SvgPicture.asset(
-              padding: const EdgeInsets.all(4.0),
-              child: SvgPicture.asset(
                 "assets/icons/item_for_sale.svg",
-                width: 20,
+                color: currentIndex == 3 ? MyColors.grey3AColor : MyColors.grey98Color,
-                height: 20,
+              ).paddingAll(4),
-              ),
-            ),
               label: LocaleKeys.itemsForSale.tr(),
             ),
           ],
           currentIndex: currentIndex,
-        selectedLabelStyle: TextStyle(
+          selectedLabelStyle: const TextStyle(fontSize: 10, color: MyColors.grey3AColor, fontWeight: FontWeight.w600),
-          fontSize: 8,
+          unselectedLabelStyle: const TextStyle(fontSize: 10, color: MyColors.grey98Color, fontWeight: FontWeight.w600),
-          color: Color(0xff989898),
-          fontWeight: FontWeight.w600,
-        ),
-        unselectedLabelStyle: TextStyle(
-          fontSize: 8,
-          color: Color(0xff989898),
-          fontWeight: FontWeight.w600,
-        ),
           type: BottomNavigationBarType.fixed,
-        selectedItemColor: Colors.black,
+          selectedItemColor: MyColors.grey3AColor,
-        backgroundColor: Color(0xffF8F8F8),
+          backgroundColor: MyColors.backgroundColor,
-        onTap: (index) {},
+          selectedIconTheme: const IconThemeData(color: MyColors.grey3AColor, size: 28),
+          unselectedIconTheme: const IconThemeData(color: MyColors.grey98Color, size: 28),
+          onTap: (int index) {
+            currentIndex = index;
+            setState(() {});
+          },
+        ),
       ),
     );
   }