Resolve "Improve StyledButton widget"

Closes #73 (closed)

lib/ui/helpers/styled_button.dart

+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 
 import 'package:random/utils/color_extensions.dart';
@@ -5,14 +6,105 @@ import 'package:random/utils/color_extensions.dart';
 class StyledButton extends StatelessWidget {
   const StyledButton({
     super.key,
-    required this.caption,
     required this.color,
     required this.onPressed,
+    this.onLongPress,
+    required this.child,
   });
 
-  final String caption;
   final Color color;
   final VoidCallback? onPressed;
+  final VoidCallback? onLongPress;
+  final Widget child;
+
+  factory StyledButton.text({
+    Key? key,
+    required VoidCallback? onPressed,
+    VoidCallback? onLongPress,
+    required String caption,
+    required Color color,
+  }) {
+    final Widget captionWidget = AutoSizeText(
+      caption,
+      maxLines: 1,
+      style: TextStyle(
+        inherit: true,
+        fontWeight: FontWeight.w900,
+        color: color.darken(60),
+        shadows: [
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(2, 2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(2, -2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(-2, 2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(-2, -2),
+          ),
+        ],
+      ),
+    );
+
+    return StyledButton(
+      color: color,
+      onPressed: onPressed,
+      onLongPress: onLongPress,
+      child: captionWidget,
+    );
+  }
+
+  factory StyledButton.icon({
+    Key? key,
+    required VoidCallback? onPressed,
+    VoidCallback? onLongPress,
+    required IconData icon,
+    required Color color,
+    required double iconSize,
+  }) {
+    return StyledButton(
+      color: color,
+      onPressed: onPressed,
+      onLongPress: onLongPress,
+      child: Icon(
+        icon,
+        color: color.darken(60),
+        size: iconSize,
+        shadows: [
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(2, 2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(2, -2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(-2, 2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(-2, -2),
+          ),
+        ],
+      ),
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -20,56 +112,28 @@ class StyledButton extends StatelessWidget {
     final Color borderColor = color.darken(40);
     const double borderRadius = 10;
 
-    return GestureDetector(
-      onTap: onPressed,
-      child: Container(
-        width: 60,
-        height: 60,
-        decoration: BoxDecoration(
-          color: color,
-          border: Border.all(
-            color: borderColor,
-            width: borderWidth,
-          ),
-          borderRadius: BorderRadius.circular(borderRadius),
+    return Container(
+      margin: EdgeInsets.all(2),
+      padding: EdgeInsets.all(2),
+      decoration: BoxDecoration(
+        color: color,
+        border: Border.all(
+          color: borderColor,
+          width: borderWidth,
         ),
-        child: CustomPaint(
-          painter: StyledButtonPainter(
-            baseColor: color,
-          ),
-          child: Center(
-            child: Text(
-              caption,
-              style: TextStyle(
-                inherit: true,
-                fontSize: 30,
-                fontWeight: FontWeight.w900,
-                color: color.darken(60),
-                shadows: [
-                  Shadow(
-                    blurRadius: 5.0,
-                    color: color.lighten(60),
-                    offset: const Offset(2, 2),
-                  ),
-                  Shadow(
-                    blurRadius: 5.0,
-                    color: color.lighten(60),
-                    offset: const Offset(2, -2),
-                  ),
-                  Shadow(
-                    blurRadius: 5.0,
-                    color: color.lighten(60),
-                    offset: const Offset(-2, 2),
-                  ),
-                  Shadow(
-                    blurRadius: 5.0,
-                    color: color.lighten(60),
-                    offset: const Offset(-2, -2),
-                  ),
-                ],
-              ),
-            ),
-          ),
+        borderRadius: BorderRadius.circular(borderRadius),
+      ),
+      child: CustomPaint(
+        painter: StyledButtonPainter(
+          baseColor: color,
+        ),
+        child: MaterialButton(
+          onPressed: onPressed,
+          onLongPress: onLongPress,
+          padding: EdgeInsets.all(8),
+          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+          minWidth: 40,
+          child: child,
         ),
       ),
     );