Improve charts colors

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=0.0.11
-app.versionCode=11
+app.versionName=0.0.12
+app.versionCode=12

fastlane/metadata/android/en-US/changelogs/12.txt

+Improve charts colors.

fastlane/metadata/android/fr-FR/changelogs/12.txt

+Amélioration des couleurs des graphiques.

lib/ui/widgets/main_screen/counts_by_day_card.dart

@@ -25,7 +25,7 @@ class ChartCountsByDayCard extends StatelessWidget {
         return Card(
           elevation: 2,
           shadowColor: Theme.of(context).colorScheme.shadow,
-          color: Theme.of(context).colorScheme.primary,
+          color: Theme.of(context).colorScheme.surface,
           shape: const RoundedRectangleBorder(
             borderRadius: BorderRadius.all(
               Radius.circular(12),

lib/ui/widgets/main_screen/counts_by_day_chart.dart

@@ -14,7 +14,7 @@ class CountsByDayCardContentChart extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: 100.0,
+      height: 120.0,
       child: LayoutBuilder(builder: (context, constraints) {
         final double maxWidth = constraints.maxWidth;
         final int barsCount = this.chartData.data.keys.length;
@@ -23,7 +23,7 @@ class CountsByDayCardContentChart extends StatelessWidget {
         return BarChart(
           BarChartData(
             barGroups: getDataCounts(barWidth),
-            backgroundColor: Theme.of(context).colorScheme.onBackground,
+            backgroundColor: Theme.of(context).colorScheme.onSurface,
             borderData: getBorderData(),
             gridData: getGridData(),
             titlesData: getTitlesData(),
@@ -54,6 +54,19 @@ class CountsByDayCardContentChart extends StatelessWidget {
     return scale * ((number ~/ scale).toInt() + 1);
   }
 
+  LinearGradient getGradient(Color baseColor) {
+    return LinearGradient(
+      begin: Alignment.topLeft,
+      end: Alignment(0.8, 1),
+      colors: <Color>[
+        baseColor.lighten(30),
+        baseColor,
+        baseColor.darken(30),
+      ],
+      tileMode: TileMode.mirror,
+    );
+  }
+
   List<BarChartGroupData> getDataCounts(double barWidth) {
     List<BarChartGroupData> data = [];
 
@@ -87,16 +100,20 @@ class CountsByDayCardContentChart extends StatelessWidget {
           default:
         }
 
+        final gradient = getGradient(barColor);
+        final borderColor = barColor.darken(20);
+
         data.add(BarChartGroupData(
           x: day,
           barRods: [
             BarChartRodData(
               toY: counts,
               color: barColor,
+              gradient: gradient,
               width: barWidth,
               borderRadius: BorderRadius.all(Radius.zero),
               borderSide: BorderSide(
-                color: barColor.darken(20),
+                color: borderColor,
               ),
             ),
           ],
@@ -120,6 +137,8 @@ class CountsByDayCardContentChart extends StatelessWidget {
   FlGridData getGridData() {
     return const FlGridData(
       show: true,
+      drawHorizontalLine: true,
+      drawVerticalLine: false,
     );
   }
 

lib/ui/widgets/main_screen/counts_by_hour_card.dart

@@ -26,7 +26,7 @@ class ChartCountsByHourCard extends StatelessWidget {
         return Card(
           elevation: 2,
           shadowColor: Theme.of(context).colorScheme.shadow,
-          color: Theme.of(context).colorScheme.primary,
+          color: Theme.of(context).colorScheme.surface,
           shape: const RoundedRectangleBorder(
             borderRadius: BorderRadius.all(
               Radius.circular(12),

lib/ui/widgets/main_screen/counts_by_hour_chart.dart

@@ -13,7 +13,7 @@ class CountsByHourCardContentChart extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: 100.0,
+      height: 120.0,
       child: LayoutBuilder(builder: (context, constraints) {
         final double maxWidth = constraints.maxWidth;
         final int barsCount = this.chartData.data.keys.length;
@@ -22,7 +22,7 @@ class CountsByHourCardContentChart extends StatelessWidget {
         return BarChart(
           BarChartData(
             barGroups: getDataCounts(barWidth),
-            backgroundColor: Theme.of(context).colorScheme.onBackground,
+            backgroundColor: Theme.of(context).colorScheme.onSurface,
             borderData: getBorderData(),
             gridData: getGridData(),
             titlesData: getTitlesData(),
@@ -53,25 +53,41 @@ class CountsByHourCardContentChart extends StatelessWidget {
     return scale * ((number ~/ scale).toInt() + 1);
   }
 
+  LinearGradient getGradient(Color baseColor) {
+    return LinearGradient(
+      begin: Alignment.topLeft,
+      end: Alignment(0.8, 1),
+      colors: <Color>[
+        baseColor.lighten(30),
+        baseColor,
+        baseColor.darken(30),
+      ],
+      tileMode: TileMode.mirror,
+    );
+  }
+
   List<BarChartGroupData> getDataCounts(double barWidth) {
     List<BarChartGroupData> data = [];
 
+    final baseColor = AppColors.contentColorCyan.darken(30);
+    final gradient = getGradient(baseColor);
+    final borderColor = baseColor.darken(20);
+
     this.chartData.data.keys.forEach((day) {
       final double? counts = this.chartData.data[day];
 
       if (counts != null) {
-        final Color barColor = AppColors.contentColorCyan.darken(30);
-
         data.add(BarChartGroupData(
           x: day,
           barRods: [
             BarChartRodData(
               toY: counts,
-              color: barColor,
+              color: baseColor,
+              gradient: gradient,
               width: barWidth,
               borderRadius: BorderRadius.all(Radius.zero),
               borderSide: BorderSide(
-                color: barColor.darken(20),
+                color: borderColor,
               ),
             ),
           ],

lib/ui/widgets/main_screen/timeline_card.dart

@@ -25,7 +25,7 @@ class ChartTimelineCard extends StatelessWidget {
         return Card(
           elevation: 2,
           shadowColor: Theme.of(context).colorScheme.shadow,
-          color: Theme.of(context).colorScheme.primary,
+          color: Theme.of(context).colorScheme.surface,
           shape: const RoundedRectangleBorder(
             borderRadius: BorderRadius.all(
               Radius.circular(12),

lib/ui/widgets/main_screen/timeline_chart_counts.dart

@@ -23,7 +23,7 @@ class ChartTimelineCounts extends StatelessWidget {
         return BarChart(
           BarChartData(
             barGroups: getDataCounts(barWidth),
-            backgroundColor: Theme.of(context).colorScheme.onBackground,
+            backgroundColor: Theme.of(context).colorScheme.onSurface,
             borderData: getBorderData(),
             gridData: getGridData(),
             titlesData: getTitlesData(),
@@ -55,9 +55,26 @@ class ChartTimelineCounts extends StatelessWidget {
     return scale * ((number ~/ scale).toInt() + 1);
   }
 
+  LinearGradient getGradient(Color baseColor) {
+    return LinearGradient(
+      begin: Alignment.topLeft,
+      end: Alignment(0.8, 1),
+      colors: <Color>[
+        baseColor.lighten(30),
+        baseColor,
+        baseColor.darken(30),
+      ],
+      tileMode: TileMode.mirror,
+    );
+  }
+
   List<BarChartGroupData> getDataCounts(double barWidth) {
     List<BarChartGroupData> data = [];
 
+    final baseColor = AppColors.contentColorOrange;
+    final gradient = getGradient(baseColor);
+    final borderColor = baseColor.darken(20);
+
     this.chartData.data.keys.forEach((key) {
       TimelineDataValue? value = this.chartData.data[key];
       if (value != null) {
@@ -69,11 +86,12 @@ class ChartTimelineCounts extends StatelessWidget {
           barRods: [
             BarChartRodData(
               toY: counts,
-              color: AppColors.contentColorOrange,
+              color: baseColor,
+              gradient: gradient,
               width: barWidth,
               borderRadius: BorderRadius.all(Radius.zero),
               borderSide: BorderSide(
-                color: AppColors.contentColorOrange.darken(20),
+                color: borderColor,
               ),
             ),
           ],
@@ -97,6 +115,8 @@ class ChartTimelineCounts extends StatelessWidget {
   FlGridData getGridData() {
     return const FlGridData(
       show: true,
+      drawHorizontalLine: true,
+      drawVerticalLine: false,
     );
   }
 

lib/ui/widgets/main_screen/timeline_chart_eclecticism.dart

@@ -4,6 +4,7 @@ import 'package:fl_chart/fl_chart.dart';
 
 import '../../../config/app_colors.dart';
 import '../../../models/timeline.dart';
+import '../../../utils/color_extensions.dart';
 
 class ChartTimelineEclecticism extends StatelessWidget {
   final TimelineData chartData;
@@ -13,11 +14,11 @@ class ChartTimelineEclecticism extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: 100.0,
+      height: 120.0,
       child: LineChart(
         LineChartData(
           lineBarsData: getDataEclecticism(),
-          backgroundColor: Theme.of(context).colorScheme.onBackground,
+          backgroundColor: Theme.of(context).colorScheme.onSurface,
           borderData: getBorderData(),
           gridData: getGridData(),
           titlesData: getTitlesData(),
@@ -30,6 +31,19 @@ class ChartTimelineEclecticism extends StatelessWidget {
     );
   }
 
+  LinearGradient getGradient(Color baseColor) {
+    return LinearGradient(
+      begin: Alignment.topCenter,
+      end: Alignment.bottomCenter,
+      colors: <Color>[
+        baseColor.lighten(30),
+        baseColor,
+        baseColor.darken(30),
+      ],
+      tileMode: TileMode.mirror,
+    );
+  }
+
   List<LineChartBarData> getDataEclecticism() {
     List<FlSpot> spots = [];
 
@@ -43,14 +57,22 @@ class ChartTimelineEclecticism extends StatelessWidget {
       }
     });
 
+    final baseColor = AppColors.contentColorCyan;
+    final gradient = getGradient(baseColor);
+    final borderColor = baseColor.darken(20);
+
     return [
       LineChartBarData(
         isCurved: true,
-        color: AppColors.contentColorCyan,
+        color: borderColor,
         barWidth: 3,
         isStrokeCapRound: false,
         dotData: const FlDotData(show: false),
-        belowBarData: BarAreaData(show: true),
+        belowBarData: BarAreaData(
+          show: true,
+          color: baseColor,
+          gradient: gradient,
+        ),
         spots: spots,
       ),
     ];
@@ -69,6 +91,8 @@ class ChartTimelineEclecticism extends StatelessWidget {
   FlGridData getGridData() {
     return const FlGridData(
       show: true,
+      drawHorizontalLine: true,
+      drawVerticalLine: false,
     );
   }
 

pubspec.yaml

@@ -3,7 +3,7 @@ description: Display scrobbles data and charts
 
 publish_to: 'none'
 
-version: 0.0.11+11
+version: 0.0.12+12
 
 environment:
   sdk: '^3.0.0'