Drawing smooth lines with Flutter - flutter

Question

I am trying to draw lines with flutter using a Custom painter. i.e https://medium.com/flutter-community/drawing-in-flutter-using-custompainter-307a9f1c21f8
How can I make the lines drawling by user smooth?

Answer 1

To draw smooth line path you can use .cubicTo() method of Path. It applies cubic Bezier interpolation. Here is code example of smooth line painter:
class SmoothLinePainter extends CustomPainter {
final Color lineColor;
final List<double> values;
SmoothLinePainter(this.lineColor, this.values);
#override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = lineColor
..style = PaintingStyle.stroke
..strokeWidth = 1;
final path = Path();
final yMin = values.reduce(min);
final yMax = values.reduce(max);
final yHeight = yMax - yMin;
final xAxisStep = size.width / values.length;
var xValue = 0.0;
for (var i = 0; i < values.length; i++) {
final value = values[i];
final yValue = yHeight == 0
? (0.5 * size.height)
: ((yMax - value) / yHeight) * size.height;
if (xValue == 0) {
path.moveTo(xValue, yValue);
} else {
final previousValue = values[i - 1];
final xPrevious = xValue - xAxisStep;
final yPrevious = yHeight == 0
? (0.5 * size.height)
: ((yMax - previousValue) / yHeight) * size.height;
final controlPointX = xPrevious + (xValue - xPrevious) / 2;
// HERE is the main line of code making your line smooth
path.cubicTo(
controlPointX, yPrevious, controlPointX, yValue, xValue, yValue);
}
xValue += xAxisStep;
}
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(_LineChartPainter old) =>
old.lineColor != lineColor && old.values != values;
}
And here is two images showing difference between using .lineTo() and .cubicTo() methods:
path.lineTo(...)
path.cubicTo(...)

Answer 2

I made a blog on how to make this feature, I hope it helps you.
It describes how to get rid of the weird-looking lines when drawing and also how to implement erase and undo feature as well.
Blog:
https://ivanstajcer.medium.com/flutter-drawing-erasing-and-undo-with-custompainter-6d00fec2bbc2
If you are not interested in all of that I will tell you quick summary of two solutions, one I found online and one I made:
Use the list of offsets and draw a line or a curve between them and also draw a circle on every offset. But this is not performance good and it will give you a bad UX in the long run.
You can read about this in the blog, divide all lines into objects and store a Path for each line, as well as a list of Offsets. Then draw the path by calling canvas.drawPath() (this is better than going through all offsets and drawing in between them) and also draw a circle in all of the offsets.
I hope this solves your problem.

Answer 3

This pub package provides a quick way to draw a smooth graph going through specific points - https://pub.dev/packages/smoothie

Answer 4

When drawing lines using the drawPath method on Canvas, strokeJoin might be another property worth checking out from the Paint class.
Since it defaults to StrokeJoin.miter, changing it StrokeJoin.round did the trick for my use case.
class SmoothPainter extends CustomPainter {
const SmoothPainter(this.path);
final Path path;
#override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..style = PaintingStyle.stroke
..strokeJoin = StrokeJoin.round
..strokeWidth = 25
..color = const Color(0xFFAABBCC);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(SmoothPainter oldDelegate) => path != oldDelegate.path;
}
From docs -
The kind of finish to place on the joins between segments.
This applies to paths drawn when style is set to PaintingStyle.stroke, It does not apply to points drawn as lines with Canvas.drawPoints.
Defaults to StrokeJoin.miter, i.e. sharp corners.
Note: The doc link also contains visuals to each StrokeJoin enum.