Add styled button widget

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=1.0.55
-app.versionCode=56
+app.versionName=1.0.56
+app.versionCode=57

lib/ui/screens/demo_page.dart

@@ -6,7 +6,9 @@ import 'package:random/config/theme.dart';
 import 'package:random/cubit/data_cubit.dart';
 import 'package:random/cubit/settings_cubit.dart';
 import 'package:random/ui/widgets/header_app.dart';
+import 'package:random/ui/widgets/styled_button.dart';
 import 'package:random/ui/widgets/styles_widget.dart';
+import 'package:random/utils/tools.dart';
 
 class DemoPage extends StatelessWidget {
   const DemoPage({super.key});
@@ -48,6 +50,48 @@ class DemoPage extends StatelessWidget {
           const SizedBox(height: 8),
           const AppHeader(text: 'BOTTOM'),
           const SizedBox(height: 8),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              StyledButton(
+                caption: 'A',
+                color: Colors.yellow,
+                onPressed: () {
+                  printlog('A');
+                },
+              ),
+              StyledButton(
+                caption: '❤️‍🔥',
+                color: Colors.red,
+                onPressed: () {
+                  printlog('fire!');
+                },
+              ),
+              StyledButton(
+                caption: '⭐',
+                color: Colors.green,
+                onPressed: () {
+                  printlog('star!');
+                },
+              ),
+              StyledButton(
+                caption: '🧁',
+                color: Colors.blue,
+                onPressed: () {
+                  printlog('Cupcake');
+                },
+              ),
+            ],
+          ),
+          const SizedBox(height: 8),
+          StyledButton(
+            caption: 'BUTTON - LARGE',
+            color: Colors.orange,
+            onPressed: () {
+              printlog('large button');
+            },
+          ),
         ],
       ),
     );

lib/ui/widgets/styled_button.dart

+import 'package:flutter/material.dart';
+
+import 'package:random/utils/color_extensions.dart';
+
+class StyledButton extends StatelessWidget {
+  const StyledButton({
+    super.key,
+    required this.caption,
+    required this.color,
+    required this.onPressed,
+  });
+
+  final String caption;
+  final Color color;
+  final VoidCallback? onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    const double borderWidth = 4;
+    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),
+        ),
+        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),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class StyledButtonPainter extends CustomPainter {
+  StyledButtonPainter({
+    required this.baseColor,
+  });
+
+  final Color baseColor;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Color lightColor = baseColor.lighten(20);
+    final Color darkColor = baseColor.darken(20);
+
+    final Paint paint = Paint()..style = PaintingStyle.fill;
+
+    const double cornerRadius = 6;
+
+    Path topPath = Path()
+      ..moveTo(cornerRadius, 0)
+      ..lineTo(size.width - cornerRadius, 0)
+      ..arcToPoint(
+        Offset(size.width, cornerRadius),
+        radius: const Radius.circular(cornerRadius),
+      )
+      ..lineTo(size.width, size.height * .35)
+      ..quadraticBezierTo(
+        size.width * .4,
+        size.height * .1,
+        0,
+        size.height * .3,
+      )
+      ..lineTo(0, cornerRadius)
+      ..arcToPoint(
+        const Offset(cornerRadius, 0),
+        radius: const Radius.circular(cornerRadius),
+      );
+
+    Path bottomPath = Path()
+      ..moveTo(cornerRadius, size.height)
+      ..lineTo(size.width - cornerRadius, size.height)
+      ..arcToPoint(
+        Offset(size.width, size.height - cornerRadius),
+        radius: const Radius.circular(cornerRadius),
+        clockwise: false,
+      )
+      ..lineTo(size.width, size.height * .7)
+      ..quadraticBezierTo(
+        size.width * .6,
+        size.height * .9,
+        0,
+        size.height * .7,
+      )
+      ..lineTo(0, size.height - cornerRadius)
+      ..arcToPoint(
+        Offset(cornerRadius, size.height),
+        radius: const Radius.circular(cornerRadius),
+        clockwise: false,
+      );
+
+    paint.color = lightColor;
+    canvas.drawPath(topPath, paint);
+
+    paint.color = darkColor;
+    canvas.drawPath(bottomPath, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

pubspec.yaml

@@ -3,7 +3,7 @@ description: A random application, for testing purpose only.
 
 publish_to: "none"
 
-version: 1.0.55+56
+version: 1.0.56+57
 
 environment:
   sdk: "^3.0.0"