Merge pull request #203 from MostroP2P/fix/expand-tapping-area-navbar

Expanded the tapping area in the bottom navbar

Author: grunch

lib/shared/widgets/bottom_nav_bar.dart

@@ -75,55 +75,62 @@ class BottomNavBar extends ConsumerWidget {
         button: true,
         enabled: true,
         label: S.of(context)!.navigateToLabel(label),
-        child: GestureDetector(
-          onTap: () => _onItemTapped(context, index),
-          child: SizedBox(
-            height: double.infinity,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                const SizedBox(height: 2),
-                SizedBox(
-                  height: 24,
-                  width: 24,
-                  child: Stack(
-                    clipBehavior: Clip.none,
-                    alignment: Alignment.center,
-                    children: [
-                      Icon(
-                        icon,
-                        color: iconColor,
-                        size: 24,
-                      ),
-                      if (notificationCount != null && notificationCount > 0)
-                        Positioned(
-                          top: -2,
-                          right: -2,
-                          child: Container(
-                            width: 6,
-                            height: 6,
-                            decoration: const BoxDecoration(
-                              color: Colors.red,
-                              shape: BoxShape.circle,
+        child: Material(
+          color: Colors.transparent,
+          child: InkWell(
+            onTap: () => _onItemTapped(context, index),
+            borderRadius: BorderRadius.circular(8),
+            splashColor: AppTheme.activeColor.withValues(alpha: 0.1),
+            highlightColor: AppTheme.activeColor.withValues(alpha: 0.05),
+            child: SizedBox(
+              height: double.infinity,
+              width: double.infinity,
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  const SizedBox(height: 2),
+                  SizedBox(
+                    height: 24,
+                    width: 24,
+                    child: Stack(
+                      clipBehavior: Clip.none,
+                      alignment: Alignment.center,
+                      children: [
+                        Icon(
+                          icon,
+                          color: iconColor,
+                          size: 24,
+                        ),
+                        if (notificationCount != null && notificationCount > 0)
+                          Positioned(
+                            top: -2,
+                            right: -2,
+                            child: Container(
+                              width: 6,
+                              height: 6,
+                              decoration: const BoxDecoration(
+                                color: Colors.red,
+                                shape: BoxShape.circle,
+                              ),
                             ),
                           ),
-                        ),
-                    ],
+                      ],
+                    ),
                   ),
-                ),
-                const SizedBox(height: 4),
-                Text(
-                  label,
-                  style: TextStyle(
-                    fontSize: 12,
-                    fontWeight: FontWeight.w400,
-                    color: textColor,
-                    height: 1.0,
-                    letterSpacing: -0.2,
+                  const SizedBox(height: 4),
+                  Text(
+                    label,
+                    style: TextStyle(
+                      fontSize: 12,
+                      fontWeight: FontWeight.w400,
+                      color: textColor,
+                      height: 1.0,
+                      letterSpacing: -0.2,
+                    ),
                   ),
-                ),
-                const SizedBox(height: 2),
-              ],
+                  const SizedBox(height: 2),
+                ],
+              ),
             ),
           ),
         ),