feat(ux/ui): Improve the filled trending value

enrique-lozano · May 2, 2024 · e95a9d8 · e95a9d8
1 parent 17fa95f
commit e95a9d8
Showing 1 changed file with 15 additions and 11 deletions.
diff --git a/lib/core/presentation/widgets/trending_value.dart b/lib/core/presentation/widgets/trending_value.dart
@@ -25,6 +25,9 @@ class TrendingValue extends StatelessWidget {
   final bool filled, outlined;
 
   Widget paintTrendValue(BuildContext context) {
+    final textColor =
+        _getColorBasedOnPercentage(context).lighten(filled ? 0.85 : 0);
+
     return Row(
       mainAxisSize: MainAxisSize.min,
       children: [
@@ -34,7 +37,7 @@ class TrendingValue extends StatelessWidget {
                 ? Icons.trending_up_rounded
                 : Icons.trending_down_rounded,
             size: fontSize * (9 / 7),
-            color: _getColorBasedOnPercentage(context),
+            color: textColor,
           ),
         if (percentage == 0)
           Text(
@@ -43,16 +46,17 @@ class TrendingValue extends StatelessWidget {
               height: 1,
               fontWeight: FontWeight.w700,
               fontSize: fontSize * (9 / 7),
-              color: _getColorBasedOnPercentage(context),
+              color: textColor,
             ),
           ),
         const SizedBox(width: 6),
         UINumberFormatter.percentage(
           amountToConvert: percentage,
           integerStyle: TextStyle(
-              fontSize: fontSize,
-              fontWeight: fontWeight,
-              color: _getColorBasedOnPercentage(context)),
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            color: textColor,
+          ),
         ).getTextWidget(context)
       ],
     );
@@ -71,16 +75,16 @@ class TrendingValue extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    if (filled || outlined) {
+    if (filled) {
       return Container(
         padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
         decoration: BoxDecoration(
-          color: !filled
-              ? null
-              : (_getColorBasedOnPercentage(context).lighten(0.85)),
-          borderRadius: BorderRadius.circular(fontSize / 3.5),
+          color: !filled ? null : (_getColorBasedOnPercentage(context)),
+          borderRadius: BorderRadius.circular(9999),
           border: outlined
-              ? Border.all(color: _getColorBasedOnPercentage(context), width: 1)
+              ? Border.all(
+                  color: _getColorBasedOnPercentage(context).lighten(0.85),
+                  width: 1)
               : null,
         ),
         child: paintTrendValue(context),