CODEWITHSUNDEEP
flutterflutter-layoutcurve
Hardip Patel
Hardip Patel

Reputation: 85

How to draw custom closed curve in Flutter?

I have tried using cubicTo and conicTo and other curves on CustomPainter canvas but the generated are not smooth to make it look like simple closed curve.

Upvotes: 0

Views: 6326

Answers (1)

Er. Divyesh Shani
Er. Divyesh Shani

Reputation: 76

You can extend CustomPainter class to make shapes, lines and curves.

Keep in mind that, start point of any path is x=0, y=0 (Top Left Corner).

When you want to draw closed paths then you have to always close path after you completed your drawing with path. See below example, it will draw smooth wave shape.

You can check here what and how you can draw with path

class CustomWave extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {

    var path = Path();
    var paint = Paint();

    path.moveTo(0,size.height*0.84);
    path.quadraticBezierTo(size.width*0.25, size.height*0.77, size.width*0.52, size.height*0.84);
    path.quadraticBezierTo(size.width*0.74, size.height*0.92, size.width, size.height*0.84);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    paint.color = AppColors.primaryColor.withOpacity(0.70);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true; 
}

Upvotes: 1

Related Questions