How to draw line with curve using Custom Paint for graph - Flutter

Question

Im working on a designing a graph in flutter using CustomPaint.

I have achieved this design using canvas.drawLine().

My question is how to make the sharp edges of line to curved smooth edges?.

My code with drawline()

List<Offset> points = const [
  Offset(0, 10),
  Offset(100, 300),
  Offset(300, 100),
  Offset(600, 500),
];

for (int i = 0; i < points.length - 1; i++) {
      Offset start = Offset(points[i].dx, points[i].dy);
      Offset end = Offset(points[i + 1].dx), points[i + 1].dy);

      canvas.drawLine(start, end, xPaint);
    }

Thanks in advance.

Answer 1

I think the best way is by using path.relativeQuadraticBezierTo();

Here is the official documentation : https://api.flutter.dev/flutter/dart-ui/Path/relativeQuadraticBezierTo.html

It takes 4 parameters which are offset positions (X, Y) and then draw a curve line between those points.

Answer 2

This pub package provides a quick way to create a smooth curve - https://pub.dev/packages/smoothie