Replaced borderSide attribute with border attribute in BarChartRodData

CHANGELOG.md

@@ -6,6 +6,7 @@
 * **BUGFIX** (by @imaNNeo) Fix PieChart crash on web-renderer html by ignoring `sectionsSpace` when `Path.combine()` does not work (it's flutter engine [issue](https://github.com/flutter/flutter/issues/44572)), #955
 * **BUGFIX** (by @imaNNeo) Fix ScatterChart long-press interaction bug (disappears when long-pressing on the chart), #1318
 * **FEATURE** (by @imaNNeo) Upgrade dart version to [3.0](https://dart.dev/resources/dart-3-migration)
+* **BREAKING** (by @MagdyYacoub1) Replace the borderSide parameter for the BarChart with border parameter of type Border , #1194
 
 ## 0.62.0
 * **BUGFIX** (by @JoshMart) Fix extra lines not painting when at chart min or max, #1255.

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

@@ -123,9 +123,11 @@ class BarChartSample1State extends State<BarChartSample1> {
           toY: isTouched ? y + 1 : y,
           color: isTouched ? widget.touchedBarColor : barColor,
           width: width,
-          borderSide: isTouched
-              ? BorderSide(color: widget.touchedBarColor.darken(80))
-              : const BorderSide(color: Colors.white, width: 0),
+          border: isTouched
+              ? Border.fromBorderSide(
+                  BorderSide(color: widget.touchedBarColor.darken(80)))
+              : const Border.fromBorderSide(
+                  BorderSide(color: Colors.white, width: 0)),
           backDrawRodData: BackgroundBarChartRodData(
             show: true,
             toY: 20,

lib/src/chart/bar_chart/bar_chart_data.dart

@@ -319,17 +319,27 @@ class BarChartRodData with EquatableMixin {
     this.gradient,
     double? width,
     BorderRadius? borderRadius,
-    BorderSide? borderSide,
+    Border? border,
     BackgroundBarChartRodData? backDrawRodData,
     List<BarChartRodStackItem>? rodStackItems,
   })  : fromY = fromY ?? 0,
         color =
             color ?? ((color == null && gradient == null) ? Colors.cyan : null),
         width = width ?? 8,
         borderRadius = Utils().normalizeBorderRadius(borderRadius, width ?? 8),
-        borderSide = Utils().normalizeBorderSide(borderSide, width ?? 8),
+        border = Utils().normalizeBorder(border, width ?? 8),
         backDrawRodData = backDrawRodData ?? BackgroundBarChartRodData(),
-        rodStackItems = rodStackItems ?? const [];
+        rodStackItems = rodStackItems ?? const [],
+        assert(
+          (borderRadius == null && border == null) ||
+              (borderRadius != null && border == null) ||
+              (borderRadius == null && border != null && border.isUniform) ||
+              (borderRadius != null && border != null && border.isUniform) ||
+              (borderRadius == BorderRadius.zero &&
+                  border != null &&
+                  !border.isUniform),
+          'A borderRadius can only be given for a uniform Border. Solve this problem by specifying broderRadius to equal BorderRadius.zero or specifying border so that all border sides have the same attributes. You may use Border.all() or Border.fromBorderSide().',
+        );
 
   /// [BarChart] renders rods vertically from [fromY].
   final double fromY;
@@ -354,7 +364,7 @@ class BarChartRodData with EquatableMixin {
   final BorderRadius? borderRadius;
 
   /// If you want to have a border for rod, set this value.
-  final BorderSide borderSide;
+  final Border border;
 
   /// If you want to have a bar drawn in rear of this rod, use [backDrawRodData],
   /// it uses to have a bar with a passive color in rear of the rod,
@@ -377,7 +387,7 @@ class BarChartRodData with EquatableMixin {
     Gradient? gradient,
     double? width,
     BorderRadius? borderRadius,
-    BorderSide? borderSide,
+    Border? border,
     BackgroundBarChartRodData? backDrawRodData,
     List<BarChartRodStackItem>? rodStackItems,
   }) {
@@ -388,7 +398,7 @@ class BarChartRodData with EquatableMixin {
       gradient: gradient ?? this.gradient,
       width: width ?? this.width,
       borderRadius: borderRadius ?? this.borderRadius,
-      borderSide: borderSide ?? this.borderSide,
+      border: border ?? this.border,
       backDrawRodData: backDrawRodData ?? this.backDrawRodData,
       rodStackItems: rodStackItems ?? this.rodStackItems,
     );
@@ -402,7 +412,7 @@ class BarChartRodData with EquatableMixin {
       color: Color.lerp(a.color, b.color, t),
       width: lerpDouble(a.width, b.width, t),
       borderRadius: BorderRadius.lerp(a.borderRadius, b.borderRadius, t),
-      borderSide: BorderSide.lerp(a.borderSide, b.borderSide, t),
+      border: Border.lerp(a.border, b.border, t),
       fromY: lerpDouble(a.fromY, b.fromY, t),
       toY: lerpDouble(a.toY, b.toY, t)!,
       backDrawRodData: BackgroundBarChartRodData.lerp(
@@ -422,7 +432,7 @@ class BarChartRodData with EquatableMixin {
         toY,
         width,
         borderRadius,
-        borderSide,
+        border,
         backDrawRodData,
         rodStackItems,
         color,

lib/src/chart/bar_chart/bar_chart_painter.dart

@@ -34,6 +34,7 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
       ..color = Colors.transparent
       ..strokeWidth = 1.0;
   }
+
   late Paint _barPaint;
   late Paint _barStrokePaint;
   late Paint _bgTouchTooltipPaint;
@@ -159,7 +160,7 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
         final widthHalf = barRod.width / 2;
         final borderRadius =
             barRod.borderRadius ?? BorderRadius.circular(barRod.width / 2);
-        final borderSide = barRod.borderSide;
+        final border = barRod.border;
 
         final x = groupBarsPosition[i].barsX[j];
 
@@ -278,28 +279,132 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
           canvasWrapper.drawRRect(barRRect, _barPaint);
 
           // draw border stroke
-          if (borderSide.width > 0 && borderSide.color.opacity > 0) {
+          // In case of uniform borders
+          if (border.isUniform &&
+              border.top.width > 0 &&
+              border.top.color.opacity > 0) {
             _barStrokePaint
-              ..color = borderSide.color
-              ..strokeWidth = borderSide.width;
+              ..color = border.top.color
+              ..strokeWidth = border.top.width;
             canvasWrapper.drawRRect(barRRect, _barStrokePaint);
           }
 
+          // In case of non-uniform borders
+          if (!border.isUniform) {
+            final path = Path();
+            // top border
+            switch (border.top.style) {
+              case BorderStyle.solid:
+                _barStrokePaint.color = border.top.color;
+                path.reset();
+                path.moveTo(barRRect.left, barRRect.top);
+                path.lineTo(barRRect.right, barRRect.top);
+                if (border.top.width == 0.0) {
+                  _barStrokePaint.style = PaintingStyle.stroke;
+                } else {
+                  _barStrokePaint.style = PaintingStyle.fill;
+                  path
+                    ..lineTo(
+                      barRRect.right - border.right.width,
+                      barRRect.top + border.top.width,
+                    )
+                    ..lineTo(
+                      barRRect.left + border.left.width,
+                      barRRect.top + border.top.width,
+                    );
+                }
+                canvasWrapper.drawPath(path, _barStrokePaint);
+              case BorderStyle.none:
+                break;
+            }
+            // left border
+            switch (border.left.style) {
+              case BorderStyle.solid:
+                _barStrokePaint.color = border.left.color;
+                path.reset();
+                path.moveTo(barRRect.left, barRRect.bottom);
+                path.lineTo(barRRect.left, barRRect.top);
+                if (border.left.width == 0.0) {
+                  _barStrokePaint.style = PaintingStyle.stroke;
+                } else {
+                  _barStrokePaint.style = PaintingStyle.fill;
+                  path
+                    ..lineTo(
+                      barRRect.left + border.left.width,
+                      barRRect.top + border.top.width,
+                    )
+                    ..lineTo(
+                      barRRect.left + border.left.width,
+                      barRRect.bottom - border.bottom.width,
+                    );
+                }
+                canvasWrapper.drawPath(path, _barStrokePaint);
+              case BorderStyle.none:
+                break;
+            }
+            // right border
+            switch (border.right.style) {
+              case BorderStyle.solid:
+                _barStrokePaint.color = border.right.color;
+                path.reset();
+                path.moveTo(barRRect.right, barRRect.top);
+                path.lineTo(barRRect.right, barRRect.bottom);
+                if (border.right.width == 0.0) {
+                  _barStrokePaint.style = PaintingStyle.stroke;
+                } else {
+                  _barStrokePaint.style = PaintingStyle.fill;
+                  path
+                    ..lineTo(
+                      barRRect.right - border.right.width,
+                      barRRect.bottom - border.bottom.width,
+                    )
+                    ..lineTo(
+                      barRRect.right - border.right.width,
+                      barRRect.top + border.top.width,
+                    );
+                }
+                canvasWrapper.drawPath(path, _barStrokePaint);
+              case BorderStyle.none:
+                break;
+            }
+            // bottom border
+            switch (border.bottom.style) {
+              case BorderStyle.solid:
+                _barStrokePaint.color = border.bottom.color;
+                path.reset();
+                path.moveTo(barRRect.right, barRRect.bottom);
+                path.lineTo(barRRect.left, barRRect.bottom);
+                if (border.bottom.width == 0.0) {
+                  _barStrokePaint.style = PaintingStyle.stroke;
+                } else {
+                  _barStrokePaint.style = PaintingStyle.fill;
+                  path
+                    ..lineTo(
+                      barRRect.left + border.left.width,
+                      barRRect.bottom - border.bottom.width,
+                    )
+                    ..lineTo(
+                      barRRect.right - border.right.width,
+                      barRRect.bottom - border.bottom.width,
+                    );
+                }
+                canvasWrapper.drawPath(path, _barStrokePaint);
+              case BorderStyle.none:
+                break;
+            }
+          }
+
           // draw rod stack
           if (barRod.rodStackItems.isNotEmpty) {
             for (var i = 0; i < barRod.rodStackItems.length; i++) {
               final stackItem = barRod.rodStackItems[i];
               final stackFromY = getPixelY(stackItem.fromY, viewSize, holder);
               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);
               canvasWrapper
                 ..save()
-                ..clipRect(rect)
+                ..clipRect(Rect.fromLTRB(left, stackToY, right, stackFromY))
                 ..drawRRect(barRRect, _barPaint)
                 ..restore();
 
@@ -603,15 +708,13 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
             holder,
           );
           barBotY = getPixelY(
-            targetData.barGroups[i].barRods[j].fromY +
-                targetData.barGroups[i].barRods[j].backDrawRodData.fromY,
+            targetData.barGroups[i].barRods[j].fromY,
             viewSize,
             holder,
           );
         } else {
           barTopY = getPixelY(
-            targetData.barGroups[i].barRods[j].fromY +
-                targetData.barGroups[i].barRods[j].backDrawRodData.fromY,
+            targetData.barGroups[i].barRods[j].fromY,
             viewSize,
             holder,
           );
@@ -704,6 +807,7 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
 @visibleForTesting
 class GroupBarsPosition {
   GroupBarsPosition(this.groupX, this.barsX);
+
   final double groupX;
   final List<double> barsX;
 }

lib/src/utils/utils.dart

@@ -9,6 +9,7 @@ class Utils {
   }
 
   Utils._internal();
+
   static Utils _singleton = Utils._internal();
 
   @visibleForTesting
@@ -103,6 +104,24 @@ class Utils {
     );
   }
 
+  /// Default value for Border where border value is not exists (uniform border)
+  static const Border defaultBorder =
+      Border.fromBorderSide(BorderSide(width: 0));
+
+  /// Decreases [borderSide] to <= width / 2
+  Border normalizeBorder(Border? border, double width) {
+    if (border == null) {
+      return defaultBorder;
+    }
+
+    return Border(
+      top: normalizeBorderSide(border.top, width),
+      bottom: normalizeBorderSide(border.bottom, width),
+      left: normalizeBorderSide(border.left, width),
+      right: normalizeBorderSide(border.right, width),
+    );
+  }
+
   /// Default value for BorderSide where borderSide value is not exists
   static const BorderSide defaultBorderSide = BorderSide(width: 0);
 

repo_files/documentations/bar_chart.md

@@ -57,7 +57,7 @@ enum values {`start`, `end`, `center`, `spaceEvenly`, `spaceAround`, `spaceBetwe
 |gradient| You can use any [Gradient](https://api.flutter.dev/flutter/dart-ui/Gradient-class.html) here. such as [LinearGradient](https://api.flutter.dev/flutter/painting/LinearGradient-class.html) or [RadialGradient](https://api.flutter.dev/flutter/painting/RadialGradient-class.html)|null|
 |width|stroke width of the rod bar|8|
 |borderRadius|Determines the edge rounding of the bar corners, see [BorderRadius](https://api.flutter.dev/flutter/painting/BorderRadius-class.html). When `null`, it defaults to completely round bars. |null|
-|borderSide|Determines the border stroke around of the bar, see [BorderSide](https://api.flutter.dev/flutter/painting/BorderSide-class.html). When `null`, it defaults to draw no stroke. |null|
+|border|Determines the border stroke of the bar for each side, see [Border](https://api.flutter.dev/flutter/painting/Border-class.html). When `null`, it defaults to draw no stroke. |null|
 |backDrawRodData|if provided, draws a rod in the background of the line bar, check the [BackgroundBarChartRodData](#BackgroundBarChartRodData)|null|
 |rodStackItem|if you want to have stacked bar chart, provide a list of [BarChartRodStackItem](#BarChartRodStackItem), it will draw over your rod.|[]|