Improve StyledButton widget

8e390a56 · Benoît Harrault · ee88e15c · 8e390a56 · 8e390a56 · 8e390a56
Commit 8e390a56 authored 8 months ago by Benoît Harrault
--- a/lib/ui/widgets/styled_button.dart
+++ b/lib/ui/widgets/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
+  factory StyledButton.text({
-  Widget build(BuildContext context) {
+    Key? key,
-    const double borderWidth = 4;
+    required VoidCallback? onPressed,
-    final Color borderColor = color.darken(40);
+    VoidCallback? onLongPress,
-    const double borderRadius = 10;
+    required String caption,
+    required Color color,
-    return GestureDetector(
+  }) {
-      onTap: onPressed,
+    final Widget captionWidget = AutoSizeText(
-      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,
+      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,
        ),
      ),
    );

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

--- a/lib/ui/screens/demo_page.dart
+++ b/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/helpers/styled_button.dart';
-import 'package:random/ui/widgets/styles_widget.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(
+              StyledButton.text(
-                caption: 'A',
+                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');
+                },
+              ),
+            ],
+          ),
        ],
      ),
    );

--- a/pubspec.lock
+++ b/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"
--- a/pubspec.yaml
+++ b/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