refactor:Smooth buttons a bit (#998)

* refactor:Smooth buttons * Format: * Format: * Format: * Format: * Format: Co-authored-by: Jasmeet Singh <jasmeetsingh@google.com>
openfoodfacts · Jan 23, 2022 · 4c5c29c · 4c5c29c
1 parent 738fdf9
commit 4c5c29c
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 66 deletions.
diff --git a/packages/smooth_app/lib/cards/product_cards/smooth_product_card_not_found.dart b/packages/smooth_app/lib/cards/product_cards/smooth_product_card_not_found.dart
@@ -3,7 +3,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:provider/provider.dart';
 import 'package:smooth_app/pages/product/add_new_product_page.dart';
 import 'package:smooth_app/themes/theme_provider.dart';
-import 'package:smooth_ui_library/buttons/smooth_simple_button.dart';
+import 'package:smooth_ui_library/buttons/smooth_large_button_with_icon.dart';
 import 'package:smooth_ui_library/util/ui_helpers.dart';
 
 class SmoothProductCardNotFound extends StatelessWidget {
@@ -52,24 +52,11 @@ class SmoothProductCardNotFound extends StatelessWidget {
                 ),
                 Padding(
                   padding: const EdgeInsets.only(top: LARGE_SPACE),
-                  child: SmoothSimpleButton(
+                  child: SmoothLargeButtonWithIcon(
                     text: appLocalizations.add_product_information_button_label,
-                    minWidth: double.infinity,
-                    borderRadius:
-                        const BorderRadius.all(Radius.circular(SMALL_SPACE)),
+                    icon: Icons.add,
                     padding: const EdgeInsets.symmetric(vertical: LARGE_SPACE),
-                    buttonColor: themeProvider.darkTheme
-                        ? Colors.grey
-                        : const Color(0xffeaf5fb),
-                    textColor: themeProvider.darkTheme
-                        ? Theme.of(context).colorScheme.onPrimary
-                        : Colors.blue,
-                    icon: Icon(
-                      Icons.add,
-                      color: themeProvider.darkTheme
-                          ? Theme.of(context).colorScheme.onPrimary
-                          : Colors.blue,
-                    ),
+                    isDarkMode: themeProvider.darkTheme,
                     onPressed: () {
                       Navigator.push<Widget>(
                         context,

diff --git a/packages/smooth_app/lib/pages/product/add_new_product_page.dart b/packages/smooth_app/lib/pages/product/add_new_product_page.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:provider/provider.dart';
 import 'package:smooth_app/themes/theme_provider.dart';
-import 'package:smooth_ui_library/buttons/smooth_simple_button.dart';
+import 'package:smooth_ui_library/buttons/smooth_large_button_with_icon.dart';
 import 'package:smooth_ui_library/util/ui_helpers.dart';
 
 class AddNewProductPage extends StatelessWidget {
@@ -52,21 +52,10 @@ class AddNewProductPage extends StatelessWidget {
     final ThemeProvider themeProvider = context.watch<ThemeProvider>();
     return Padding(
       padding: const EdgeInsets.only(top: VERY_LARGE_SPACE),
-      child: SmoothSimpleButton(
+      child: SmoothLargeButtonWithIcon(
         text: text,
-        minWidth: double.infinity,
-        borderRadius: const BorderRadius.all(Radius.circular(SMALL_SPACE)),
-        buttonColor:
-            themeProvider.darkTheme ? Colors.grey : const Color(0xffeaf5fb),
-        textColor: themeProvider.darkTheme
-            ? Theme.of(context).colorScheme.onPrimary
-            : Colors.blue,
-        icon: Icon(
-          Icons.camera_alt,
-          color: themeProvider.darkTheme
-              ? Theme.of(context).colorScheme.onPrimary
-              : Colors.blue,
-        ),
+        icon: Icons.camera_alt,
+        isDarkMode: themeProvider.darkTheme,
         onPressed: () {
           Navigator.push<Widget>(
             context,

diff --git a/packages/smooth_ui_library/lib/buttons/smooth_action_button.dart b/packages/smooth_ui_library/lib/buttons/smooth_action_button.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:smooth_ui_library/buttons/smooth_simple_button.dart';
 
 class SmoothActionButton extends StatelessWidget {
   const SmoothActionButton({
@@ -16,22 +17,15 @@ class SmoothActionButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final ThemeData themeData = Theme.of(context);
-    return MaterialButton(
-      color: themeData.colorScheme.primary,
-      child: Padding(
-        padding: const EdgeInsets.all(10),
-        child: Text(
-          text,
-          style: themeData.textTheme.bodyText2!
-              .copyWith(color: themeData.colorScheme.onPrimary),
-        ),
+    return SmoothSimpleButton(
+      child: Text(
+        text,
+        style: themeData.textTheme.bodyText2!
+            .copyWith(color: themeData.colorScheme.onPrimary),
       ),
+      onPressed: onPressed,
       height: height,
       minWidth: minWidth,
-      shape: const RoundedRectangleBorder(
-        borderRadius: BorderRadius.all(Radius.circular(15.0)),
-      ),
-      onPressed: () => onPressed(),
     );
   }
 }
diff --git a/packages/smooth_ui_library/lib/buttons/smooth_large_button_with_icon.dart b/packages/smooth_ui_library/lib/buttons/smooth_large_button_with_icon.dart
@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:smooth_ui_library/buttons/smooth_simple_button.dart';
+import 'package:smooth_ui_library/util/ui_helpers.dart';
+
+class SmoothLargeButtonWithIcon extends StatelessWidget {
+  const SmoothLargeButtonWithIcon({
+    required this.text,
+    required this.icon,
+    required this.onPressed,
+    required this.isDarkMode,
+    this.padding,
+  });
+
+  final String text;
+  final IconData icon;
+  final VoidCallback onPressed;
+  final bool isDarkMode;
+  final EdgeInsets? padding;
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData themeData = Theme.of(context);
+    return SmoothSimpleButton(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: <Widget>[
+          Icon(
+            icon,
+            color: isDarkMode
+                ? Theme.of(context).colorScheme.onPrimary
+                : Colors.blue,
+          ),
+          const Spacer(),
+          Text(
+            text,
+            textAlign: TextAlign.center,
+            style: themeData.textTheme.bodyText2!.copyWith(
+              color: isDarkMode
+                  ? Theme.of(context).colorScheme.onPrimary
+                  : Colors.blue,
+            ),
+          ),
+          const Spacer(),
+        ],
+      ),
+      minWidth: double.infinity,
+      borderRadius: const BorderRadius.all(Radius.circular(SMALL_SPACE)),
+      padding: padding ?? const EdgeInsets.all(10),
+      buttonColor: isDarkMode ? Colors.grey : const Color(0xffeaf5fb),
+      onPressed: onPressed,
+    );
+  }
+}
diff --git a/packages/smooth_ui_library/lib/buttons/smooth_simple_button.dart b/packages/smooth_ui_library/lib/buttons/smooth_simple_button.dart
@@ -2,26 +2,22 @@ import 'package:flutter/material.dart';
 
 class SmoothSimpleButton extends StatelessWidget {
   const SmoothSimpleButton({
-    required this.text,
+    required this.child,
     required this.onPressed,
     this.minWidth = 15,
     this.height = 20,
     this.borderRadius = const BorderRadius.all(Radius.circular(15.0)),
     this.padding = const EdgeInsets.all(10),
     this.buttonColor,
-    this.textColor,
-    this.icon,
   });
 
-  final String text;
+  final Widget child;
   final VoidCallback onPressed;
   final double minWidth;
   final double height;
   final BorderRadius borderRadius;
   final EdgeInsets padding;
   final Color? buttonColor;
-  final Color? textColor;
-  final Widget? icon;
 
   @override
   Widget build(BuildContext context) {
@@ -30,21 +26,7 @@ class SmoothSimpleButton extends StatelessWidget {
       color: buttonColor ?? themeData.colorScheme.primary,
       child: Padding(
         padding: padding,
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.start,
-          children: <Widget>[
-            if (icon != null) icon!,
-            const Spacer(),
-            Text(
-              text,
-              textAlign: TextAlign.center,
-              style: themeData.textTheme.bodyText2!.copyWith(
-                color: textColor ?? themeData.colorScheme.onPrimary,
-              ),
-            ),
-            const Spacer(),
-          ],
-        ),
+        child: child,
       ),
       height: height,
       minWidth: minWidth,