add gradient param to radar chart

imaNNeo · Sep 24, 2024 · d09b88b · d09b88b
1 parent 1336e36
commit d09b88b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 46 deletions.
diff --git a/example/lib/presentation/samples/radar/radar_chart_sample2.dart b/example/lib/presentation/samples/radar/radar_chart_sample2.dart
@@ -2,6 +2,7 @@ import 'package:fl_chart_app/presentation/resources/app_resources.dart';
 import 'package:fl_chart_app/util/extensions/color_extensions.dart';
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
+import 'dart:math' show pi;
 
 class RadarChartSample2 extends StatefulWidget {
   RadarChartSample2({super.key});
@@ -230,15 +231,30 @@ class _RadarChartSample2State extends State<RadarChartSample2> {
 
       return RadarDataSet(
         fillColor: isSelected
-            ? rawDataSet.color.withOpacity(0.2)
-            : rawDataSet.color.withOpacity(0.01),
-        borderColor: isSelected
-            ? rawDataSet.color.withOpacity(0.6)
+            ? rawDataSet.color.withOpacity(0.75)
             : rawDataSet.color.withOpacity(0.15),
+        borderColor:
+            isSelected ? rawDataSet.color : rawDataSet.color.withOpacity(0.2),
         entryRadius: isSelected ? 3 : 2,
+        gradient: SweepGradient(
+          startAngle: 3 * pi / 2,
+          endAngle: 7 * pi / 2,
+          tileMode: TileMode.repeated,
+          colors: isSelected
+              ? [
+                  rawDataSet.color.withOpacity(0.9),
+                  rawDataSet.color.withOpacity(0.8),
+                  rawDataSet.color.withOpacity(0.7),
+                  rawDataSet.color.withOpacity(0.6),
+                  rawDataSet.color.withOpacity(0.5),
+                  rawDataSet.color.withOpacity(0.4),
+                ]
+              : List.filled(6, Colors.grey.withOpacity(0.2)),
+          stops: [0, 0.16, 0.32, 0.48, 0.64, 0.8],
+        ),
         dataEntries:
             rawDataSet.values.map((e) => RadarEntry(value: e)).toList(),
-        borderWidth: isSelected ? 1.0 : 0.3,
+        borderWidth: isSelected ? 1.3 : 0.3,
       );
     }).toList();
   }

diff --git a/lib/src/chart/radar_chart/radar_chart_data.dart b/lib/src/chart/radar_chart/radar_chart_data.dart
@@ -285,6 +285,7 @@ class RadarDataSet with EquatableMixin {
   RadarDataSet({
     List<RadarEntry>? dataEntries,
     Color? fillColor,
+    Gradient? gradient,
     Color? borderColor,
     double? borderWidth,
     double? entryRadius,
@@ -294,6 +295,7 @@ class RadarDataSet with EquatableMixin {
         ),
         dataEntries = dataEntries ?? const [],
         fillColor = fillColor ?? Colors.cyan.withOpacity(0.2),
+        gradient = gradient, 
         borderColor = borderColor ?? Colors.cyan,
         borderWidth = borderWidth ?? 2.0,
         entryRadius = entryRadius ?? 5.0;
@@ -304,6 +306,9 @@ class RadarDataSet with EquatableMixin {
   /// defines the color that fills the [RadarDataSet].
   final Color fillColor;
 
+  // defines the gradient color that fills the [RadarDataSet].
+  final Gradient? gradient;
+
   /// defines the border color of the [RadarDataSet].
   /// if [borderColor] is not defined it will replaced with [fillColor].
   final Color borderColor;
@@ -321,13 +326,15 @@ class RadarDataSet with EquatableMixin {
   RadarDataSet copyWith({
     List<RadarEntry>? dataEntries,
     Color? fillColor,
+    Gradient? gradient,
     Color? borderColor,
     double? borderWidth,
     double? entryRadius,
   }) =>
       RadarDataSet(
         dataEntries: dataEntries ?? this.dataEntries,
         fillColor: fillColor ?? this.fillColor,
+        gradient: gradient,
         borderColor: borderColor ?? this.borderColor,
         borderWidth: borderWidth ?? this.borderWidth,
         entryRadius: entryRadius ?? this.entryRadius,
@@ -338,6 +345,7 @@ class RadarDataSet with EquatableMixin {
     return RadarDataSet(
       dataEntries: lerpRadarEntryList(a.dataEntries, b.dataEntries, t),
       fillColor: Color.lerp(a.fillColor, b.fillColor, t),
+      gradient: Gradient.lerp(a.gradient, b.gradient, t),
       borderColor: Color.lerp(a.borderColor, b.borderColor, t),
       borderWidth: lerpDouble(a.borderWidth, b.borderWidth, t),
       entryRadius: lerpDouble(a.entryRadius, b.entryRadius, t),
@@ -349,6 +357,7 @@ class RadarDataSet with EquatableMixin {
   List<Object?> get props => [
         dataEntries,
         fillColor,
+        gradient, 
         borderColor,
         borderWidth,
         entryRadius,

diff --git a/lib/src/chart/radar_chart/radar_chart_painter.dart b/lib/src/chart/radar_chart/radar_chart_painter.dart
@@ -281,7 +281,8 @@ class RadarChartPainter extends BaseChartPainter<RadarChartData> {
     for (var index = 0; index < data.titleCount; index++) {
       final baseTitleAngle = Utils().degrees(diffAngle * index);
       final title = data.getTitle!(index, baseTitleAngle);
-      final span = TextSpan(text: title.text, children: title.children, style: style);
+      final span =
+          TextSpan(text: title.text, children: title.children, style: style);
       _titleTextPaint
         ..text = span
         ..layout();
@@ -339,46 +340,19 @@ class RadarChartPainter extends BaseChartPainter<RadarChartData> {
 
     dataSetsPosition!.asMap().forEach((index, dataSetOffset) {
       final graph = data.dataSets[index];
-      // Create the gradient
-      final sweepGradient = SweepGradient(
-        startAngle: 3 * pi / 2,
-        endAngle: 7 * pi / 2,
-        tileMode: TileMode.repeated,
-        colors: [
-          // Colors.green.shade900.withOpacity(0.9),
-          // Colors.green.shade800.withOpacity(0.9),
-          // Colors.green.shade700.withOpacity(0.9),
-          // Colors.green.shade600.withOpacity(0.9),
-          // Colors.green.shade500.withOpacity(0.9),
-          // Colors.green.shade400.withOpacity(0.9),
-
-          graph.fillColor.withOpacity(0.9),
-          graph.fillColor.withOpacity(0.8),
-          graph.fillColor.withOpacity(0.7),
-          graph.fillColor.withOpacity(0.6),
-          graph.fillColor.withOpacity(0.5),
-          graph.fillColor.withOpacity(0.4),
-
-          // graph.fillColor.withOpacity(0.4),
-          // graph.fillColor.withOpacity(0.45),
-          // graph.fillColor.withOpacity(0.5),
-          // graph.fillColor.withOpacity(0.6),
-          // graph.fillColor.withOpacity(0.7),
-          // graph.fillColor.withOpacity(0.8),
-        ],
-        stops: [0, 0.16, 0.32, 0.48, 0.64, 0.8],
-      );
-
-      // Create the shader
-      final rect = Rect.fromCircle(center: centerOffset, radius: radius);
-      _graphPaint
-        ..shader = sweepGradient.createShader(rect)
-        ..style = PaintingStyle.fill;
-
-      // _graphPaint
-      //   ..color = graph.fillColor
-      //   ..style = PaintingStyle.fill;
-
+      // if gradient exists
+      if (graph.gradient != null) {
+        // Create the shader
+        final rect = Rect.fromCircle(center: centerOffset, radius: radius);
+        _graphPaint
+          ..shader = graph.gradient!.createShader(rect)
+          ..style = PaintingStyle.fill;
+      } else {
+        // else solid fill color
+        _graphPaint
+          ..color = graph.fillColor
+          ..style = PaintingStyle.fill;
+      }
       _graphBorderPaint
         ..color = graph.borderColor
         ..style = PaintingStyle.stroke