feat: add gradient support for BarChartRodStackItem (#1979)

Author: kamilJ96

example/lib/presentation/samples/bar/bar_chart_sample5.dart

@@ -169,7 +169,16 @@ class BarChartSample5State extends State<BarChartSample5> {
             BarChartRodStackItem(
               0,
               value1,
-              AppColors.contentColorGreen,
+              null,
+              gradient: LinearGradient(colors: [
+                AppColors.contentColorWhite.withValues(alpha: 0.8),
+                AppColors.contentColorGreen.withValues(alpha: 0.5),
+                AppColors.contentColorCyan.withValues(alpha: 0.2),
+              ], stops: const [
+                0.1,
+                0.4,
+                0.9
+              ], begin: Alignment.topLeft, end: Alignment.bottomRight),
               label: isTouched ? 'A' : null,
               borderSide: BorderSide(
                 color: Colors.white,
@@ -189,7 +198,17 @@ class BarChartSample5State extends State<BarChartSample5> {
             BarChartRodStackItem(
               value1 + value2,
               value1 + value2 + value3,
-              AppColors.contentColorPink,
+              null,
+              gradient: LinearGradient(
+                colors: [
+                  AppColors.contentColorPurple,
+                  AppColors.contentColorRed.withValues(alpha: 0.9),
+                  AppColors.contentColorOrange.withValues(alpha: 0.8),
+                ],
+                stops: const [0, 0.5, 1],
+                begin: Alignment.topLeft,
+                end: Alignment.bottomRight,
+              ),
               label: isTouched ? 'C' : null,
               borderSide: BorderSide(
                 color: Colors.white,
@@ -225,8 +244,19 @@ class BarChartSample5State extends State<BarChartSample5> {
             BarChartRodStackItem(
               0,
               -value1,
-              AppColors.contentColorGreen.withValues(
-                  alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
+              null,
+              gradient: LinearGradient(colors: [
+                AppColors.contentColorWhite.withValues(
+                    alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
+                AppColors.contentColorGreen.withValues(
+                    alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
+                AppColors.contentColorCyan.withValues(
+                    alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
+              ], stops: const [
+                0.1,
+                0.4,
+                0.9
+              ], begin: Alignment.topLeft, end: Alignment.bottomRight),
               label: isTouched ? 'A' : null,
               borderSide: const BorderSide(color: Colors.transparent),
             ),
@@ -241,8 +271,24 @@ class BarChartSample5State extends State<BarChartSample5> {
             BarChartRodStackItem(
               -(value1 + value2),
               -(value1 + value2 + value3),
-              AppColors.contentColorPink.withValues(
-                  alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
+              null,
+              gradient: LinearGradient(
+                colors: [
+                  AppColors.contentColorPurple.withValues(
+                      alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
+                  AppColors.contentColorRed.withValues(
+                      alpha: isTouched
+                          ? (shadowOpacity * 2) - 0.1
+                          : shadowOpacity),
+                  AppColors.contentColorOrange.withValues(
+                      alpha: isTouched
+                          ? (shadowOpacity * 2) - 0.2
+                          : shadowOpacity),
+                ],
+                stops: const [0, 0.5, 1],
+                begin: Alignment.topLeft,
+                end: Alignment.bottomRight,
+              ),
               label: isTouched ? 'C' : null,
               borderSide: const BorderSide(color: Colors.transparent),
             ),

lib/src/chart/bar_chart/bar_chart_data.dart

@@ -471,7 +471,7 @@ class BarChartRodData with EquatableMixin {
 /// Each [BarChartRodData] can have a list of [BarChartRodStackItem] (with different colors
 /// and position) to represent a Stacked Chart rod,
 class BarChartRodStackItem with EquatableMixin {
-  /// Renders a section of Stacked Chart from [fromY] to [toY] with [color]
+  /// Renders a section of Stacked Chart from [fromY] to [toY] with [color] or [gradient]
   /// for example if you want to have a Stacked Chart with three colors:
   /// ```dart
   /// BarChartRodData(
@@ -484,14 +484,19 @@ class BarChartRodStackItem with EquatableMixin {
   ///   ]
   /// )
   /// ```
+  /// To use the [gradient], set [color] to null
   BarChartRodStackItem(
     this.fromY,
     this.toY,
     this.color, {
+    this.gradient,
     this.label,
     this.labelStyle,
     this.borderSide = Utils.defaultBorderSide,
-  });
+  }) : assert(
+          color != null || gradient != null,
+          'You must provide either a color or gradient',
+        );
   final String? label;
   final TextStyle? labelStyle;
 
@@ -502,7 +507,10 @@ class BarChartRodStackItem with EquatableMixin {
   final double toY;
 
   /// Renders a Stacked Chart section with [color]
-  final Color color;
+  final Color? color;
+
+  /// Renders a Stacked Chart section with [gradient]
+  final Gradient? gradient;
 
   /// Renders border stroke for a Stacked Chart section
   final BorderSide borderSide;
@@ -513,6 +521,7 @@ class BarChartRodStackItem with EquatableMixin {
     double? fromY,
     double? toY,
     Color? color,
+    Gradient? gradient,
     String? label,
     TextStyle? labelStyle,
     BorderSide? borderSide,
@@ -521,6 +530,7 @@ class BarChartRodStackItem with EquatableMixin {
         fromY ?? this.fromY,
         toY ?? this.toY,
         color ?? this.color,
+        gradient: gradient ?? this.gradient,
         label: label ?? this.label,
         labelStyle: labelStyle ?? this.labelStyle,
         borderSide: borderSide ?? this.borderSide,
@@ -535,15 +545,17 @@ class BarChartRodStackItem with EquatableMixin {
       BarChartRodStackItem(
         lerpDouble(a.fromY, b.fromY, t)!,
         lerpDouble(a.toY, b.toY, t)!,
-        Color.lerp(a.color, b.color, t)!,
+        Color.lerp(a.color, b.color, t),
+        gradient: Gradient.lerp(a.gradient, b.gradient, t),
         label: b.label,
         labelStyle: b.labelStyle,
         borderSide: BorderSide.lerp(a.borderSide, b.borderSide, t),
       );
 
   /// Used for equality check, see [EquatableMixin].
   @override
-  List<Object?> get props => [fromY, toY, color, label, labelStyle, borderSide];
+  List<Object?> get props =>
+      [fromY, toY, color, gradient, label, labelStyle, borderSide];
 }
 
 /// Holds values to draw a rod in rear of the main rod.

lib/src/chart/bar_chart/bar_chart_painter.dart

@@ -311,10 +311,14 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
               final stackToY = getPixelY(stackItem.toY, viewSize, holder);
 
               final isNegative = stackItem.toY < stackItem.fromY;
-              _barPaint.color = stackItem.color;
               final rect = isNegative
                   ? Rect.fromLTRB(left, stackFromY, right, stackToY)
                   : Rect.fromLTRB(left, stackToY, right, stackFromY);
+              _barPaint.setColorOrGradient(
+                stackItem.color,
+                stackItem.gradient,
+                rect,
+              );
               canvasWrapper
                 ..save()
                 ..clipRect(rect)

repo_files/documentations/bar_chart.md

@@ -77,6 +77,7 @@ enum values {`start`, `end`, `center`, `spaceEvenly`, `spaceAround`, `spaceBetwe
 |fromY|draw stack item from this value|null|
 |toY|draw stack item to this value|null|
 |color|color of the stack item|null|
+|gradient|gradient of the stack item|null|
 |label|optional text label for the stack item|null|
 |labelStyle|optional TextStyle for the label|null|
 |borderSide|draw border stroke for each stack item|null|

test/chart/bar_chart/bar_chart_painter_test.dart

@@ -1,3 +1,5 @@
+import 'dart:ui' as ui show Gradient;
+
 import 'package:fl_chart/fl_chart.dart';
 import 'package:fl_chart/src/chart/bar_chart/bar_chart_helper.dart';
 import 'package:fl_chart/src/chart/bar_chart/bar_chart_painter.dart';
@@ -1277,7 +1279,10 @@ void main() {
                 BarChartRodStackItem(
                   5,
                   10,
-                  const Color(0x44444444),
+                  null,
+                  gradient: const LinearGradient(
+                    colors: [Color(0xFFFF0000), Color(0xFF00FF00)],
+                  ),
                   label: '5',
                 ),
               ],
@@ -1286,7 +1291,13 @@ void main() {
         ),
       ];
 
-      final data = BarChartData(barGroups: barGroups);
+      final (minY, maxY) = BarChartHelper().calculateMaxAxisValues(barGroups);
+
+      final data = BarChartData(
+        barGroups: barGroups,
+        minY: minY,
+        maxY: maxY,
+      );
 
       final barChartPainter = BarChartPainter();
       final holder =
@@ -1309,6 +1320,7 @@ void main() {
         final paint = inv.positionalArguments[1] as Paint;
         results.add({
           'paint_color': paint.color,
+          'gradient': paint.shader is ui.Gradient,
         });
       });
 
@@ -1326,9 +1338,17 @@ void main() {
         results[3]['paint_color'],
         isSameColorAs(const Color(0x33333333)),
       );
+      expect(
+        results[3]['gradient'],
+        false,
+      );
       expect(
         results[4]['paint_color'],
-        isSameColorAs(const Color(0x44444444)),
+        isSameColorAs(const Color(0xFF000000)),
+      );
+      expect(
+        results[4]['gradient'],
+        true,
       );
     });
 
@@ -3418,4 +3438,10 @@ void main() {
       ).called(2);
     });
   });
+
+  group('BarChartRodStackItem()', () {
+    test('throws an exception if color and gradient is null', () {
+      expect(() => BarChartRodStackItem(0, 10, null), throwsAssertionError);
+    });
+  });
 }