feat(app-theme): add gradient and primary color to bottom buttons (#85)

* feat(app-theme): add gradient and primary colors as per theme * feat(app-theme): dart format * fix(app-theme): move to functions
FieldAssist · Apr 9, 2024 · bec925c · bec925c
1 parent 07c28a8
commit bec925c
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 61 deletions.
diff --git a/lib/src/modules/day_start/widgets/day_start_button.dart b/lib/src/modules/day_start/widgets/day_start_button.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 
 enum DayStartButtonBorderStyle { singleBorder, fullBorder, singleBorderWhiteBg }
 
@@ -11,6 +12,8 @@ class DayStartButton extends StatelessWidget {
     this.dayStartButtonBorderStyle = DayStartButtonBorderStyle.singleBorder,
     this.isDarkMode = false,
     this.borderColor = Colors.transparent,
+    this.primaryColor,
+    this.gradient,
     Key? key,
   }) : super(key: key);
 
@@ -22,74 +25,90 @@ class DayStartButton extends StatelessWidget {
   final VoidCallback onPressed;
   final bool isDisabled;
   final bool isDarkMode;
+  final Color? primaryColor;
+  final LinearGradient? gradient;
 
   @override
   Widget build(BuildContext context) {
-    return TextButton(
-      style: TextButton.styleFrom(
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(8),
-          side:
-              dayStartButtonBorderStyle == DayStartButtonBorderStyle.fullBorder
-                  ? BorderSide(
-                      width: 1,
-                      color: borderColor,
-                    )
-                  : BorderSide(
-                      width: 0,
-                      color: Colors.transparent,
-                    ),
-        ),
-        padding: EdgeInsets.zero,
-        minimumSize: Size.fromHeight(48),
-        backgroundColor: (dayStartButtonBorderStyle ==
-                    DayStartButtonBorderStyle.fullBorder ||
-                dayStartButtonBorderStyle ==
-                    DayStartButtonBorderStyle.singleBorderWhiteBg)
-            ? Colors.white
-            : Color(0xffE5F8FF),
+    return Container(
+      decoration: BoxDecoration(
+        color: _getBackgrounColor(),
+        gradient: gradient,
       ),
-      onPressed: isDisabled ? null : onPressed,
-      child: Row(
-        children: [
-          SizedBox(
-            width: 10,
-            height: 56,
-            child: DecoratedBox(
-              decoration: BoxDecoration(
-                color: borderColor,
-                borderRadius: BorderRadius.only(
-                  topLeft: Radius.circular(8),
-                  bottomLeft: Radius.circular(8),
+      child: TextButton(
+        style: TextButton.styleFrom(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(8),
+            side: _getBorderSide(),
+          ),
+          padding: EdgeInsets.zero,
+          minimumSize: Size.fromHeight(48),
+          backgroundColor: Colors.transparent,
+        ),
+        onPressed: isDisabled ? null : onPressed,
+        child: Row(
+          children: [
+            SizedBox(
+              width: 10,
+              height: 56,
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  color: borderColor,
+                  borderRadius: BorderRadius.only(
+                    topLeft: Radius.circular(8),
+                    bottomLeft: Radius.circular(8),
+                  ),
                 ),
               ),
             ),
-          ),
-          Expanded(
-            child: Padding(
-              padding: const EdgeInsets.symmetric(
-                horizontal: 12,
-              ),
-              child: Text(
-                text,
-                style: TextStyle(
-                  fontSize: 16,
-                  color: titleColor,
-                  fontWeight: FontWeight.w300,
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 12,
+                ),
+                child: Text(
+                  text,
+                  style: TextStyle(
+                    fontSize: 16,
+                    color: titleColor,
+                    fontWeight: FontWeight.w300,
+                  ),
                 ),
               ),
             ),
-          ),
-          Icon(
-            Icons.arrow_forward,
-            size: 20,
-            color: Colors.grey,
-          ),
-          SizedBox(
-            width: 12,
-          ),
-        ],
+            Icon(
+              Icons.arrow_forward,
+              size: 20,
+              color: Colors.grey,
+            ),
+            SizedBox(
+              width: 12,
+            ),
+          ],
+        ),
       ),
     );
   }
+
+  BorderSide _getBorderSide() {
+    return dayStartButtonBorderStyle == DayStartButtonBorderStyle.fullBorder
+        ? BorderSide(
+            width: 1,
+            color: borderColor,
+          )
+        : BorderSide(
+            width: 0,
+            color: Colors.transparent,
+          );
+  }
+
+  Color? _getBackgrounColor() {
+    return primaryColor != null
+        ? primaryColor
+        : (dayStartButtonBorderStyle == DayStartButtonBorderStyle.fullBorder ||
+                dayStartButtonBorderStyle ==
+                    DayStartButtonBorderStyle.singleBorderWhiteBg)
+            ? Colors.white
+            : Color(0xffE5F8FF);
+  }
 }
diff --git a/lib/src/widgets/common/bottom_action_button.dart b/lib/src/widgets/common/bottom_action_button.dart
@@ -15,6 +15,8 @@ class BottomActionButton extends StatelessWidget {
   final GestureTapCallback? onPressed;
   final IconPosition iconPosition;
   final bool forceButtonColor;
+  final Color? primaryColor;
+  final LinearGradient? gradient;
 
   const BottomActionButton({
     Key? key,
@@ -29,6 +31,8 @@ class BottomActionButton extends StatelessWidget {
     this.iconPosition = IconPosition.end,
     this.height = 60,
     this.forceButtonColor = false,
+    this.primaryColor,
+    this.gradient,
     this.icon = const Icon(
       Icons.arrow_forward,
       color: Colors.white,
@@ -58,9 +62,6 @@ class BottomActionButton extends StatelessWidget {
       ]
     }[iconPosition];
 
-    var buttonColor = onPressed != null ? color : Colors.grey;
-    if (forceButtonColor) buttonColor = color;
-
     return Padding(
       padding: EdgeInsets.only(
         bottom: MediaQuery.of(context).viewInsets.bottom,
@@ -71,7 +72,10 @@ class BottomActionButton extends StatelessWidget {
         child: Container(
           width: MediaQuery.of(context).size.width,
           height: height,
-          color: buttonColor,
+          decoration: BoxDecoration(
+            color: _getBackgrounColor(),
+            gradient: gradient,
+          ),
           child: Center(
             child: isCustomChildren
                 ? child
@@ -84,4 +88,15 @@ class BottomActionButton extends StatelessWidget {
       ),
     );
   }
+
+  Color? _getBackgrounColor() {
+    if (forceButtonColor) {
+      return color;
+    }
+    return onPressed != null
+        ? primaryColor != null
+            ? primaryColor
+            : color
+        : Colors.grey;
+  }
 }