Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added gradient to FlLine #1446

Merged
merged 2 commits into from
Nov 5, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
## nextVersion
* **FEATURE** (by @Dartek12): Added gradient to [FlLine](https://github.com/imaNNeo/fl_chart/blob/master/repo_files/documentations/base_chart.md#FlLine)

## 0.64.0
* **BUGFIX** (by @Anas35) Fix Tooltip not displaying when value from BackgroundBarChartRodData is less than zero. #1345.
* **BUGFIX** (by @imaNNeo) Fix Negative BarChartRodStackItem are not drawn correctly bug, #1347
Expand Down
17 changes: 13 additions & 4 deletions lib/src/chart/base/axis_chart/axis_chart_data.dart
Original file line number Diff line number Diff line change
Expand Up @@ -664,13 +664,18 @@ class FlLine with EquatableMixin {
/// For example, the array `[5, 10]` would result in dashes 5 pixels long
/// followed by blank spaces 10 pixels long.
const FlLine({
this.color = Colors.black,
Color? color,
this.gradient,
this.strokeWidth = 2,
this.dashArray,
});
}) : color = color ??
((color == null && gradient == null) ? Colors.black : null);

/// Defines color of the line.
final Color color;
final Color? color;

/// Defines the gradient of the line.
final Gradient? gradient;

/// Defines thickness of the line.
final double strokeWidth;
Expand All @@ -685,7 +690,8 @@ class FlLine with EquatableMixin {
/// Lerps a [FlLine] based on [t] value, check [Tween.lerp].
static FlLine lerp(FlLine a, FlLine b, double t) {
return FlLine(
color: Color.lerp(a.color, b.color, t)!,
color: Color.lerp(a.color, b.color, t),
gradient: Gradient.lerp(a.gradient, b.gradient, t),
strokeWidth: lerpDouble(a.strokeWidth, b.strokeWidth, t)!,
dashArray: lerpIntList(a.dashArray, b.dashArray, t),
);
Expand All @@ -695,11 +701,13 @@ class FlLine with EquatableMixin {
/// and replaces provided values.
FlLine copyWith({
Color? color,
Gradient? gradient,
double? strokeWidth,
List<int>? dashArray,
}) {
return FlLine(
color: color ?? this.color,
gradient: gradient ?? this.gradient,
strokeWidth: strokeWidth ?? this.strokeWidth,
dashArray: dashArray ?? this.dashArray,
);
Expand All @@ -709,6 +717,7 @@ class FlLine with EquatableMixin {
@override
List<Object?> get props => [
color,
gradient,
strokeWidth,
dashArray,
];
Expand Down
59 changes: 43 additions & 16 deletions lib/src/chart/base/axis_chart/axis_chart_painter.dart
Original file line number Diff line number Diff line change
Expand Up @@ -73,20 +73,28 @@ abstract class AxisChartPainter<D extends AxisChartData>
if (!data.gridData.checkToShowVerticalLine(axisValue)) {
continue;
}
final flLineStyle = data.gridData.getDrawingVerticalLine(axisValue);
_gridPaint
..color = flLineStyle.color
..strokeWidth = flLineStyle.strokeWidth
..transparentIfWidthIsZero();

final bothX = getPixelX(axisValue, viewSize, holder);
final x1 = bothX;
const y1 = 0.0;
final x2 = bothX;
final y2 = viewSize.height;
final from = Offset(x1, y1);
final to = Offset(x2, y2);

final flLineStyle = data.gridData.getDrawingVerticalLine(axisValue);
_gridPaint
..setColorOrGradientForLine(
flLineStyle.color,
flLineStyle.gradient,
from: from,
to: to,
)
..strokeWidth = flLineStyle.strokeWidth
..transparentIfWidthIsZero();

canvasWrapper.drawDashedLine(
Offset(x1, y1),
Offset(x2, y2),
from,
to,
_gridPaint,
flLineStyle.dashArray,
);
Expand All @@ -111,19 +119,28 @@ abstract class AxisChartPainter<D extends AxisChartData>
continue;
}
final flLine = data.gridData.getDrawingHorizontalLine(axisValue);
_gridPaint
..color = flLine.color
..strokeWidth = flLine.strokeWidth
..transparentIfWidthIsZero();

final bothY = getPixelY(axisValue, viewSize, holder);
const x1 = 0.0;
final y1 = bothY;
final x2 = viewSize.width;
final y2 = bothY;
final from = Offset(x1, y1);
final to = Offset(x2, y2);

_gridPaint
..setColorOrGradientForLine(
flLine.color,
flLine.gradient,
from: from,
to: to,
)
..strokeWidth = flLine.strokeWidth
..transparentIfWidthIsZero();

canvasWrapper.drawDashedLine(
Offset(x1, y1),
Offset(x2, y2),
from,
to,
_gridPaint,
flLine.dashArray,
);
Expand Down Expand Up @@ -229,7 +246,12 @@ abstract class AxisChartPainter<D extends AxisChartData>

if (!isLineOutsideOfChart) {
_extraLinesPaint
..color = line.color
..setColorOrGradientForLine(
line.color,
line.gradient,
from: from,
to: to,
)
..strokeWidth = line.strokeWidth
..transparentIfWidthIsZero()
..strokeCap = line.strokeCap;
Expand Down Expand Up @@ -316,7 +338,12 @@ abstract class AxisChartPainter<D extends AxisChartData>

if (!isLineOutsideOfChart) {
_extraLinesPaint
..color = line.color
..setColorOrGradientForLine(
line.color,
line.gradient,
from: from,
to: to,
)
..strokeWidth = line.strokeWidth
..transparentIfWidthIsZero()
..strokeCap = line.strokeCap;
Expand Down
2 changes: 1 addition & 1 deletion lib/src/chart/line_chart/line_chart_data.dart
Original file line number Diff line number Diff line change
Expand Up @@ -1195,7 +1195,7 @@ List<TouchedSpotIndicatorData> defaultTouchedIndicators(
lineColor = _defaultGetDotColor(barData.spots[index], 0, barData);
}
const lineStrokeWidth = 4.0;
final flLine = FlLine(color: lineColor!, strokeWidth: lineStrokeWidth);
final flLine = FlLine(color: lineColor, strokeWidth: lineStrokeWidth);

var dotSize = 10.0;
if (barData.dotData.show) {
Expand Down
38 changes: 27 additions & 11 deletions lib/src/chart/line_chart/line_chart_painter.dart
Original file line number Diff line number Diff line change
Expand Up @@ -411,16 +411,22 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
}
}

final indicatorLine = indicatorData.indicatorBelowLine;
_touchLinePaint
..color = indicatorData.indicatorBelowLine.color
..strokeWidth = indicatorData.indicatorBelowLine.strokeWidth
..setColorOrGradientForLine(
indicatorLine.color,
indicatorLine.gradient,
from: lineStart,
to: lineEnd,
)
..strokeWidth = indicatorLine.strokeWidth
..transparentIfWidthIsZero();

canvasWrapper.drawDashedLine(
lineStart,
lineEnd,
_touchLinePaint,
indicatorData.indicatorBelowLine.dashArray,
indicatorLine.dashArray,
);

/// Draw the indicator dot
Expand Down Expand Up @@ -752,17 +758,22 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
);
}

final lineStyle = barData.belowBarData.spotsLine.flLineStyle;
_barAreaLinesPaint
..color = barData.belowBarData.spotsLine.flLineStyle.color
..strokeWidth =
barData.belowBarData.spotsLine.flLineStyle.strokeWidth
..setColorOrGradientForLine(
lineStyle.color,
lineStyle.gradient,
from: from,
to: to,
)
..strokeWidth = lineStyle.strokeWidth
..transparentIfWidthIsZero();

canvasWrapper.drawDashedLine(
from,
to,
_barAreaLinesPaint,
barData.belowBarData.spotsLine.flLineStyle.dashArray,
lineStyle.dashArray,
);
}
}
Expand Down Expand Up @@ -841,17 +852,22 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
);
}

final lineStyle = barData.aboveBarData.spotsLine.flLineStyle;
_barAreaLinesPaint
..color = barData.aboveBarData.spotsLine.flLineStyle.color
..strokeWidth =
barData.aboveBarData.spotsLine.flLineStyle.strokeWidth
..setColorOrGradientForLine(
lineStyle.color,
lineStyle.gradient,
from: from,
to: to,
)
..strokeWidth = lineStyle.strokeWidth
..transparentIfWidthIsZero();

canvasWrapper.drawDashedLine(
from,
to,
_barAreaLinesPaint,
barData.aboveBarData.spotsLine.flLineStyle.dashArray,
lineStyle.dashArray,
);
}
}
Expand Down
10 changes: 10 additions & 0 deletions lib/src/extensions/paint_extension.dart
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,14 @@ extension PaintExtension on Paint {
shader = null;
}
}

void setColorOrGradientForLine(
Color? color,
Gradient? gradient, {
required Offset from,
required Offset to,
}) {
final rect = Rect.fromPoints(from, to);
setColorOrGradient(color, gradient, rect);
}
}
1 change: 1 addition & 0 deletions repo_files/documentations/base_chart.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@
|propName|Description|default value|
|:-------|:----------|:------------|
|color|determines the color of line|Colors.black|
|gradient|gradient of the line|null|
|strokeWidth|determines the stroke width of the line|2|
|dashArray|A circular array of dash offsets and lengths. For example, the array `[5, 10]` would result in dashes 5 pixels long followed by blank spaces 10 pixels long. The array `[5, 10, 5]` would result in a 5 pixel dash, a 10 pixel gap, a 5 pixel dash, a 5 pixel gap, a 10 pixel dash, etc.|null|

Expand Down
16 changes: 16 additions & 0 deletions test/extensions/paint_extension_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,20 @@ void main() {
expect(paint.color, MockData.color0);
expect(paint.shader, isNull);
});

test('test setColorOrGradientForLine', () {
final paint = Paint()
..color = MockData.color0
..setColorOrGradientForLine(
null,
MockData.gradient1,
from: MockData.rect1.topLeft,
to: MockData.rect1.bottomRight,
);
expect(paint.shader, isNotNull);

paint.setColorOrGradient(MockData.color0, null, MockData.rect1);
expect(paint.color, MockData.color0);
expect(paint.shader, isNull);
});
}