Improve StyledButton widget

lib/ui/widgets/styled_button.dart → 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,44 +6,29 @@ 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;
 
-  @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(
+  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,
-                fontSize: 30,
         fontWeight: FontWeight.w900,
         color: color.darken(60),
         shadows: [
@@ -68,8 +54,86 @@ class StyledButton extends StatelessWidget {
           ),
         ],
       ),
+    );
+
+    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) {
+    const double borderWidth = 4;
+    final Color borderColor = color.darken(40);
+    const double borderRadius = 10;
+
+    return Container(
+      margin: EdgeInsets.all(2),
+      padding: EdgeInsets.all(2),
+      decoration: BoxDecoration(
+        color: color,
+        border: Border.all(
+          color: borderColor,
+          width: borderWidth,
+        ),
+        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,
         ),
       ),
     );

lib/ui/widgets/styles_widget.dart → lib/ui/helpers/styled_container.dart

 import 'package:flutter/material.dart';
 
-class StyledWidget extends StatelessWidget {
-  const StyledWidget({
+class StyledContainer extends StatelessWidget {
+  const StyledContainer({
     super.key,
     required this.child,
     this.borderWidth = 20,

lib/ui/screens/demo_page.dart

@@ -6,8 +6,8 @@ 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/ui/helpers/styled_button.dart';
+import 'package:random/ui/helpers/styled_container.dart';
 import 'package:random/utils/tools.dart';
 
 class DemoPage extends StatelessWidget {
@@ -24,11 +24,11 @@ class DemoPage extends StatelessWidget {
           const SizedBox(height: 8),
           const AppHeader(text: 'TOP'),
           const SizedBox(height: 20),
-          StyledWidget(
+          StyledContainer(
             child: persistedCounterBlock(BlocProvider.of<DataCubit>(context)),
           ),
           const SizedBox(height: 8),
-          StyledWidget(
+          StyledContainer(
             borderRadius: 0,
             borderWidth: 12,
             // depth: 8,
@@ -37,7 +37,7 @@ class DemoPage extends StatelessWidget {
             child: testBlocConsumer(),
           ),
           const SizedBox(height: 8),
-          StyledWidget(
+          StyledContainer(
             borderRadius: 10,
             borderWidth: 30,
             depth: 20,
@@ -54,44 +54,83 @@ class DemoPage extends StatelessWidget {
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
-              StyledButton(
-                caption: 'A',
+              StyledButton.text(
+                caption: 'ABC',
                 color: Colors.yellow,
                 onPressed: () {
                   printlog('A');
                 },
               ),
-              StyledButton(
+              StyledButton.text(
                 caption: '❤️‍🔥',
                 color: Colors.red,
                 onPressed: () {
                   printlog('fire!');
                 },
               ),
-              StyledButton(
+              StyledButton.text(
                 caption: '⭐',
                 color: Colors.green,
                 onPressed: () {
                   printlog('star!');
                 },
               ),
-              StyledButton(
+              StyledButton.text(
                 caption: '🧁',
                 color: Colors.blue,
                 onPressed: () {
                   printlog('Cupcake');
                 },
               ),
+              StyledButton.icon(
+                icon: UniconsLine.setting,
+                color: Colors.purple,
+                iconSize: 20,
+                onPressed: () {
+                  printlog('icon');
+                },
+              ),
             ],
           ),
           const SizedBox(height: 8),
-          StyledButton(
+          StyledButton.text(
             caption: 'BUTTON - LARGE',
             color: Colors.orange,
             onPressed: () {
               printlog('large button');
             },
           ),
+          const SizedBox(height: 8),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              TextButton(
+                child: Text('ABC'),
+                onPressed: () {
+                  printlog('TextButton');
+                },
+              ),
+              OutlinedButton(
+                child: Text('❤️‍🔥'),
+                onPressed: () {
+                  printlog('OutlinedButton');
+                },
+              ),
+              FilledButton(
+                child: Text('⭐'),
+                onPressed: () {
+                  printlog('FilledButton');
+                },
+              ),
+              ElevatedButton(
+                child: Text('🧁'),
+                onPressed: () {
+                  printlog('ElevatedButton');
+                },
+              ),
+            ],
+          ),
         ],
       ),
     );

pubspec.lock

@@ -17,6 +17,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.11.0"
+  auto_size_text:
+    dependency: "direct main"
+    description:
+      name: auto_size_text
+      sha256: "3f5261cd3fb5f2a9ab4e2fc3fba84fd9fcaac8821f20a1d4e71f557521b22599"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
   bloc:
     dependency: transitive
     description:
@@ -37,10 +45,10 @@ packages:
     dependency: transitive
     description:
       name: camera_android_camerax
-      sha256: "7cd93578ad201dcc6bb5810451fb00d76a86bab9b68dceb68b8cbd7038ac5846"
+      sha256: e65d0d29a298926c63b0f009c5e045735a3ac183f5ae61a07ad826d8007a6018
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.8+3"
+    version: "0.6.9+1"
   camera_avfoundation:
     dependency: transitive
     description:
@@ -186,10 +194,10 @@ packages:
     dependency: "direct dev"
     description:
       name: flutter_lints
-      sha256: "3f41d009ba7172d5ff9be5f6e6e6abb4300e263aab8866d2a0842ed2a70f8f0c"
+      sha256: "5398f14efa795ffb7a33e9b6a08798b26a180edac4ad7db3f231e40f82ce11e1"
       url: "https://pub.dev"
     source: hosted
-    version: "4.0.0"
+    version: "5.0.0"
   flutter_localizations:
     dependency: transitive
     description: flutter
@@ -252,10 +260,10 @@ packages:
     dependency: transitive
     description:
       name: lints
-      sha256: "976c774dd944a42e83e2467f4cc670daef7eed6295b10b36ae8c85bcbf828235"
+      sha256: "3315600f3fb3b135be672bf4a178c55f274bebe368325ae18462c89ac1e3b413"
       url: "https://pub.dev"
     source: hosted
-    version: "4.0.0"
+    version: "5.0.0"
   material_color_utilities:
     dependency: transitive
     description:
@@ -465,10 +473,10 @@ packages:
     dependency: transitive
     description:
       name: synchronized
-      sha256: "51b08572b9f091f8c3eb4d9d4be253f196ff0075d5ec9b10a884026d5b55d7bc"
+      sha256: "69fe30f3a8b04a0be0c15ae6490fc859a78ef4c43ae2dd5e8a623d45bfcf9225"
       url: "https://pub.dev"
     source: hosted
-    version: "3.3.0+2"
+    version: "3.3.0+3"
   term_glyph:
     dependency: transitive
     description:
@@ -505,26 +513,26 @@ packages:
     dependency: transitive
     description:
       name: web
-      sha256: d43c1d6b787bf0afad444700ae7f4db8827f701bc61c255ac8d328c6f4d52062
+      sha256: cd3543bd5798f6ad290ea73d210f423502e71900302dde696f8bff84bf89a1cb
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.0"
+    version: "1.1.0"
   win32:
     dependency: transitive
     description:
       name: win32
-      sha256: "68d1e89a91ed61ad9c370f9f8b6effed9ae5e0ede22a270bdfa6daf79fc2290a"
+      sha256: "4d45dc9069dba4619dc0ebd93c7cec5e66d8482cb625a370ac806dcc8165f2ec"
       url: "https://pub.dev"
     source: hosted
-    version: "5.5.4"
+    version: "5.5.5"
   xdg_directories:
     dependency: transitive
     description:
       name: xdg_directories
-      sha256: faea9dee56b520b55a566385b84f2e8de55e7496104adada9962e0bd11bcff1d
+      sha256: "7a3f37b05d989967cdddcbb571f1ea834867ae2faa29725fd085180e0883aa15"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.4"
+    version: "1.1.0"
 sdks:
   dart: ">=3.5.0 <4.0.0"
   flutter: ">=3.24.0"

pubspec.yaml

@@ -13,6 +13,7 @@ dependencies:
     sdk: flutter
 
   # base
+  auto_size_text: ^3.0.0
   easy_localization: ^3.0.1
   equatable: ^2.0.5
   flutter_bloc: ^8.1.1
@@ -29,7 +30,7 @@ dependencies:
   path: ^1.9.0
 
 dev_dependencies:
-  flutter_lints: ^4.0.0
+  flutter_lints: ^5.0.0
 
 flutter:
   uses-material-design: true