Add Pattern Painters Support for BarChart (Stripes, Dots, Squares)

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

@@ -6,6 +6,13 @@ import 'package:fl_chart_app/util/extensions/color_extensions.dart';
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 
+enum BarPattern {
+  stripes,
+  squarePois,
+  circlePois,
+  none,
+}
+
 class BarChartSample1 extends StatefulWidget {
   BarChartSample1({super.key});
 
@@ -33,6 +40,36 @@ class BarChartSample1State extends State<BarChartSample1> {
   int touchedIndex = -1;
 
   bool isPlaying = false;
+  BarPattern pattern = BarPattern.none;
+  final stripesPainter = StripesPatternPainter(
+    width: 2,
+    gap: 8,
+    angle: 45,
+  );
+  final squarePoisPainter = SquarePoisPatternPainter(
+    color: AppColors.contentColorBlack,
+    squaresPerRow: 4,
+    gap: 2.0,
+    verticalGap: 2.0,
+    margin: 2.0,
+  );
+  final circlePoisPainter = CirclePoisPatternPainter(
+    color: AppColors.contentColorBlack,
+    gap: 2.0,
+  );
+
+  @override
+  void initState() {
+    super.initState();
+
+    initializeShaders();
+  }
+
+  Future<void> initializeShaders() async {
+    await stripesPainter.initialize();
+    await squarePoisPainter.initialize();
+    await circlePoisPainter.initialize();
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -79,6 +116,32 @@ class BarChartSample1State extends State<BarChartSample1> {
                 const SizedBox(
                   height: 12,
                 ),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: <Widget>[
+                    Text(
+                      'Bar pattern',
+                      style: TextStyle(
+                        color: AppColors.contentColorGreen.darken(),
+                        fontSize: 16,
+                      ),
+                    ),
+                    DropdownButton<BarPattern>(
+                      value: pattern,
+                      items: BarPattern.values
+                          .map((e) => DropdownMenuItem(
+                                value: e,
+                                child: Text(e.name),
+                              ))
+                          .toList(),
+                      onChanged: (BarPattern? value) {
+                        setState(() {
+                          pattern = value ?? BarPattern.none;
+                        });
+                      },
+                    )
+                  ],
+                ),
               ],
             ),
           ),
@@ -107,6 +170,15 @@ class BarChartSample1State extends State<BarChartSample1> {
     );
   }
 
+  FlSurfacePainter<FlShader>? _getPainter() {
+    return switch (pattern) {
+      BarPattern.stripes => stripesPainter,
+      BarPattern.squarePois => squarePoisPainter,
+      BarPattern.circlePois => circlePoisPainter,
+      BarPattern.none => null,
+    } as FlSurfacePainter<FlShader>?;
+  }
+
   BarChartGroupData makeGroupData(
     int x,
     double y, {
@@ -123,6 +195,7 @@ class BarChartSample1State extends State<BarChartSample1> {
           toY: isTouched ? y + 1 : y,
           color: isTouched ? widget.touchedBarColor : barColor,
           width: width,
+          surfacePainter: _getPainter(),
           borderSide: isTouched
               ? BorderSide(color: widget.touchedBarColor.darken(80))
               : const BorderSide(color: Colors.white, width: 0),

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

@@ -24,9 +24,36 @@ class BarChartSample5State extends State<BarChartSample5> {
   };
   int touchedIndex = -1;
 
+  final stripesPainter = StripesPatternPainter(
+    width: 2,
+    gap: 6,
+    angle: 45,
+    color: Colors.white,
+  );
+  final squarePoisPainter = SquarePoisPatternPainter(
+    color: Colors.blueGrey,
+    squaresPerRow: 3,
+    gap: 2.0,
+    verticalGap: 2.0,
+    margin: 2.0,
+  );
+  final circlePoisPainter = CirclePoisPatternPainter(
+    dotsPerRow: 3,
+    color: Colors.black,
+    gap: 2.0,
+  );
+
   @override
   void initState() {
     super.initState();
+
+    initializeShaders();
+  }
+
+  Future<void> initializeShaders() async {
+    await stripesPainter.initialize();
+    await squarePoisPainter.initialize();
+    await circlePoisPainter.initialize();
   }
 
   Widget bottomTitles(double value, TitleMeta meta) {
@@ -170,7 +197,7 @@ class BarChartSample5State extends State<BarChartSample5> {
               0,
               value1,
               AppColors.contentColorGreen,
-              BorderSide(
+              borderSide: BorderSide(
                 color: Colors.white,
                 width: isTouched ? 2 : 0,
               ),
@@ -179,28 +206,31 @@ class BarChartSample5State extends State<BarChartSample5> {
               value1,
               value1 + value2,
               AppColors.contentColorYellow,
-              BorderSide(
+              borderSide: BorderSide(
                 color: Colors.white,
                 width: isTouched ? 2 : 0,
               ),
+              surfacePainter: squarePoisPainter,
             ),
             BarChartRodStackItem(
               value1 + value2,
               value1 + value2 + value3,
               AppColors.contentColorPink,
-              BorderSide(
+              borderSide: BorderSide(
                 color: Colors.white,
                 width: isTouched ? 2 : 0,
               ),
+              surfacePainter: circlePoisPainter,
             ),
             BarChartRodStackItem(
               value1 + value2 + value3,
               value1 + value2 + value3 + value4,
               AppColors.contentColorBlue,
-              BorderSide(
+              borderSide: BorderSide(
                 color: Colors.white,
                 width: isTouched ? 2 : 0,
               ),
+              surfacePainter: stripesPainter,
             ),
           ],
         ),
@@ -223,28 +253,28 @@ class BarChartSample5State extends State<BarChartSample5> {
               -value1,
               AppColors.contentColorGreen.withValues(
                   alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
-              const BorderSide(color: Colors.transparent),
+              borderSide: const BorderSide(color: Colors.transparent),
             ),
             BarChartRodStackItem(
               -value1,
               -(value1 + value2),
               AppColors.contentColorYellow.withValues(
                   alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
-              const BorderSide(color: Colors.transparent),
+              borderSide: const BorderSide(color: Colors.transparent),
             ),
             BarChartRodStackItem(
               -(value1 + value2),
               -(value1 + value2 + value3),
               AppColors.contentColorPink.withValues(
                   alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
-              const BorderSide(color: Colors.transparent),
+              borderSide: const BorderSide(color: Colors.transparent),
             ),
             BarChartRodStackItem(
               -(value1 + value2 + value3),
               -(value1 + value2 + value3 + value4),
               AppColors.contentColorBlue.withValues(
                   alpha: isTouched ? shadowOpacity * 2 : shadowOpacity),
-              const BorderSide(color: Colors.transparent),
+              borderSide: const BorderSide(color: Colors.transparent),
             ),
           ],
         ),

lib/fl_chart.dart

@@ -16,3 +16,11 @@ export 'src/chart/radar_chart/radar_chart.dart';
 export 'src/chart/radar_chart/radar_chart_data.dart';
 export 'src/chart/scatter_chart/scatter_chart.dart';
 export 'src/chart/scatter_chart/scatter_chart_data.dart';
+export 'src/pattern_painters/circle_pois_painter.dart';
+export 'src/pattern_painters/square_pois_painter.dart';
+export 'src/pattern_painters/stripes_painter.dart';
+export 'src/shaders/circle_pois_shader.dart';
+export 'src/shaders/fl_shader.dart';
+export 'src/shaders/fl_surface_painter.dart';
+export 'src/shaders/square_pois_shader.dart';
+export 'src/shaders/stripes_shader.dart';

lib/src/chart/bar_chart/bar_chart_data.dart

@@ -341,6 +341,7 @@ class BarChartRodData with EquatableMixin {
     BorderSide? borderSide,
     BackgroundBarChartRodData? backDrawRodData,
     List<BarChartRodStackItem>? rodStackItems,
+    this.surfacePainter,
   })  : fromY = fromY ?? 0,
         color =
             color ?? ((color == null && gradient == null) ? Colors.cyan : null),
@@ -350,6 +351,10 @@ class BarChartRodData with EquatableMixin {
         backDrawRodData = backDrawRodData ?? BackgroundBarChartRodData(),
         rodStackItems = rodStackItems ?? const [];
 
+  /// If provided, this [BarChartRodData] will be drawn using this CustomPainter.
+  /// If null, the default rendering is used.
+  final FlSurfacePainter? surfacePainter;
+
   /// [BarChart] renders rods vertically from [fromY].
   final double fromY;
 
@@ -413,6 +418,7 @@ class BarChartRodData with EquatableMixin {
     BorderSide? borderSide,
     BackgroundBarChartRodData? backDrawRodData,
     List<BarChartRodStackItem>? rodStackItems,
+    FlSurfacePainter? surfacePainter,
   }) =>
       BarChartRodData(
         fromY: fromY ?? this.fromY,
@@ -426,6 +432,7 @@ class BarChartRodData with EquatableMixin {
         borderSide: borderSide ?? this.borderSide,
         backDrawRodData: backDrawRodData ?? this.backDrawRodData,
         rodStackItems: rodStackItems ?? this.rodStackItems,
+        surfacePainter: surfacePainter ?? this.surfacePainter,
       );
 
   /// Lerps a [BarChartRodData] based on [t] value, check [Tween.lerp].
@@ -447,6 +454,8 @@ class BarChartRodData with EquatableMixin {
         ),
         rodStackItems:
             lerpBarChartRodStackList(a.rodStackItems, b.rodStackItems, t),
+        surfacePainter:
+            lerpSurfacePainter(a.surfacePainter, b.surfacePainter, t),
       );
 
   /// Used for equality check, see [EquatableMixin].
@@ -463,6 +472,7 @@ class BarChartRodData with EquatableMixin {
         rodStackItems,
         color,
         gradient,
+        surfacePainter,
       ];
 }
 
@@ -487,9 +497,10 @@ class BarChartRodStackItem with EquatableMixin {
   BarChartRodStackItem(
     this.fromY,
     this.toY,
-    this.color, [
+    this.color, {
     this.borderSide = Utils.defaultBorderSide,
-  ]);
+    this.surfacePainter,
+  });
 
   /// Renders a Stacked Chart section from [fromY]
   final double fromY;
@@ -503,19 +514,25 @@ class BarChartRodStackItem with EquatableMixin {
   /// Renders border stroke for a Stacked Chart section
   final BorderSide borderSide;
 
+  /// If provided, this [BarChartRodStackItem] will be drawn using this CustomPainter.
+  /// If null, the default rendering is used.
+  final FlSurfacePainter? surfacePainter;
+
   /// Copies current [BarChartRodStackItem] to a new [BarChartRodStackItem],
   /// and replaces provided values.
   BarChartRodStackItem copyWith({
     double? fromY,
     double? toY,
     Color? color,
     BorderSide? borderSide,
+    FlSurfacePainter? surfacePainter,
   }) =>
       BarChartRodStackItem(
         fromY ?? this.fromY,
         toY ?? this.toY,
         color ?? this.color,
-        borderSide ?? this.borderSide,
+        borderSide: borderSide ?? this.borderSide,
+        surfacePainter: surfacePainter ?? this.surfacePainter,
       );
 
   /// Lerps a [BarChartRodStackItem] based on [t] value, check [Tween.lerp].
@@ -528,12 +545,20 @@ class BarChartRodStackItem with EquatableMixin {
         lerpDouble(a.fromY, b.fromY, t)!,
         lerpDouble(a.toY, b.toY, t)!,
         Color.lerp(a.color, b.color, t)!,
-        BorderSide.lerp(a.borderSide, b.borderSide, t),
+        borderSide: BorderSide.lerp(a.borderSide, b.borderSide, t),
+        surfacePainter:
+            lerpSurfacePainter(a.surfacePainter, b.surfacePainter, t),
       );
 
   /// Used for equality check, see [EquatableMixin].
   @override
-  List<Object?> get props => [fromY, toY, color, borderSide];
+  List<Object?> get props => [
+        fromY,
+        toY,
+        color,
+        borderSide,
+        surfacePainter,
+      ];
 }
 
 /// Holds values to draw a rod in rear of the main rod.