Merge pull request #185 from yaso-meth/QOL--MihButton-Update

custome button

Frontend/lib/mih_components/mih_package_components/Example/package_tools/package_tool_one.dart

@@ -130,6 +130,7 @@ class _PackageToolOneState extends State<PackageToolOne> {
                 },
                 buttonColor:
                     MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                elevation: 10,
                 width: 300,
                 child: Text(
                   "Click Me",
@@ -141,7 +142,7 @@ class _PackageToolOneState extends State<PackageToolOne> {
                   ),
                 ),
               ),
-              const SizedBox(height: 10),
+              const SizedBox(height: 40),
               MihButton(
                 onPressed: () {
                   print("Button Pressed");
@@ -150,6 +151,7 @@ class _PackageToolOneState extends State<PackageToolOne> {
                     MzanziInnovationHub.of(context)!.theme.successColor(),
                 width: 300,
                 child: Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
                   children: [
                     Icon(
                       Icons.delete,

Frontend/lib/mih_components/mih_package_components/mih_button.dart

@@ -1,42 +1,64 @@
-import 'package:animated_button/animated_button.dart';
 import 'package:flutter/material.dart';
 
-class MihButton extends StatefulWidget {
+class MihButton extends StatelessWidget {
-  final void Function() onPressed;
+  final void Function()? onPressed;
   final Color buttonColor;
-  final double width;
+  final double? width;
   final double? height;
   final double? borderRadius;
+  final double? elevation; // 0 = flat, higher = more shadow
   final Widget child;
 
   const MihButton({
     super.key,
     required this.onPressed,
     required this.buttonColor,
-    required this.width,
+    this.width,
     this.height,
     this.borderRadius,
+    this.elevation,
     required this.child,
   });
+  Color _darkerColor(Color color, [double amount = .1]) {
+    final hsl = HSLColor.fromColor(color);
+    final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));
+    return hslDark.toColor();
+  }
 
-  @override
-  State<MihButton> createState() => _MihButtonState();
-}
-
-class _MihButtonState extends State<MihButton> {
   @override
   Widget build(BuildContext context) {
-    return FittedBox(
+    final Color effectiveButtonColor = onPressed == null
-      fit: BoxFit.contain,
+        ? buttonColor.withValues(alpha: 0.6) // Example disabled color
-      child: AnimatedButton(
+        : buttonColor;
-        width: widget.width,
+    final Color rippleColor = _darkerColor(effectiveButtonColor, 0.1);
-        height: widget.height ?? 50.0,
+    final double radius = borderRadius ?? 25.0;
-        borderRadius: widget.borderRadius ?? 25.0,
+    final double effectiveElevation =
-        color: widget.buttonColor,
+        onPressed == null ? 0.0 : (elevation ?? 4.0);
-        shadowDegree: ShadowDegree.light,
+    return MouseRegion(
-        duration: 30,
+      cursor: onPressed == null
-        onPressed: widget.onPressed,
+          ? SystemMouseCursors.basic
-        child: FittedBox(child: widget.child),
+          : SystemMouseCursors.click,
+      child: Material(
+        color: effectiveButtonColor,
+        borderRadius: BorderRadius.circular(radius),
+        elevation: effectiveElevation,
+        shadowColor: Colors.black,
+        child: InkWell(
+          borderRadius: BorderRadius.circular(radius),
+          splashColor: rippleColor,
+          highlightColor: rippleColor.withValues(alpha: 0.2),
+          hoverColor: rippleColor.withValues(alpha: 0.3),
+          onTap: onPressed,
+          child: Container(
+            width: width,
+            height: height,
+            padding: (width == null || height == null)
+                ? const EdgeInsets.symmetric(horizontal: 24, vertical: 12)
+                : null,
+            alignment: Alignment.center,
+            child: child,
+          ),
+        ),
       ),
     );
   }