home: Add ink splash effect on bottom navbar buttons

Author: MritunjayTiwari14

lib/widgets/home.dart

@@ -254,26 +254,31 @@ class _NavigationBarButton extends StatelessWidget {
     return AnimatedScaleOnTap(
       scaleEnd: 0.875,
       duration: const Duration(milliseconds: 100),
-      child: GestureDetector(
-        behavior: HitTestBehavior.opaque,
-        onTap: onPressed,
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            SizedBox(height: 34,
-              child: Center(
-                child: Icon(icon, size: 24, color: color,))),
-            Flexible(
-              child: Text(
-                label,
-                style: TextStyle(
-                  fontSize: 12,
-                  color: color,
-                  height: 1.0,),
-                textAlign: TextAlign.center,
-                maxLines: 2,
-                overflow: TextOverflow.ellipsis)),
-          ])));
+      child: Material(
+        type: MaterialType.transparency,
+        child: InkWell(
+          // TODO(#417): Disable splash effects for all buttons globally.
+          borderRadius: BorderRadius.all(Radius.circular(4)),
+          splashFactory: NoSplash.splashFactory,
+          highlightColor: designVariables.navigationButtonBg,
+          onTap: onPressed,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              SizedBox(height: 34,
+                child: Center(
+                  child: Icon(icon, size: 24, color: color,))),
+              Flexible(
+                child: Text(
+                  label,
+                  style: TextStyle(
+                    fontSize: 12,
+                    color: color,
+                    height: 1.0,),
+                  textAlign: TextAlign.center,
+                  maxLines: 2,
+                  overflow: TextOverflow.ellipsis)),
+            ]))));
   }
 }