CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-custompainterflutter-custompaint
Sugan Pandurengan
Sugan Pandurengan

Reputation: 723

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

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

enter image description here

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.

Upvotes: 0

Views: 1819

Answers (2)

Alex Kuzmin
Alex Kuzmin

Reputation: 725

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

Upvotes: 1

Thalosse
Thalosse

Reputation: 41

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.

Upvotes: 1

Related Questions