Flutter CustomPainter Design, Creating a beautiful Curves Shape

Following is the code for the widget in which we have used the custom painter class. This is the code you can use it everywhere in your flutter app easily.

The interface used by CustomPaint and RenderCustomPaint.

To implement a custom painter, either subclass or implement this interface to define your custom paint delegate. CustomPaint subclasses must implement the paint and shouldRepaint methods, and may optionally also implement the hitTest and shouldRebuildSemantics methods, and the semanticsBuilder getter.

The paint method is called whenever the custom object needs to be repainted.

The shouldRepaint method is called when a new instance of the class is provided, to check if the new instance actually represents different information.

          Container(    width: 300,
                        height: 200,
                        color: Colors.cyan,
                        child: CustomPaint(
                          size: Size(
                                     800,500
                                    ), //You can Replace this with your desired WIDTH and HEIGHT
                          painter: RPSCustomPainter(),
                        ),
                  ),

Here is the class for this beautiful and attractive curves design. You can easily change the color of the CustomPainter Curves Design.

To change the curve color simply go to the RPSCustomPainter 

and change color from yellow to red blue and any others.

If you want only a border design, you can change the style property from   PaintingStyle.fill    to   PaintingStyle.stroke

class RPSCustomPainter extends CustomPainter{
  
  @override
  void paint(Canvas canvas, Size size) {
    
    Paint paint = new Paint()
      ..color = Colors.yellow
      ..style = PaintingStyle.fill;
        
    Path path = Path();
    path.moveTo(0,size.height*0.25);
    path.quadraticBezierTo(size.width*0.06,size.height*0.94,size.width*0.17,size.height*0.37);
    path.cubicTo(size.width*0.22,size.height*0.36,size.width*0.26,size.height*0.35,size.width*0.30,size.height*0.28);
    path.cubicTo(size.width*0.36,size.height*0.55,size.width*0.30,size.height*1.06,size.width*0.50,size.height*0.53);
    path.cubicTo(size.width*0.73,size.height*1.12,size.width*0.62,size.height*0.37,size.width*0.69,size.height*0.28);
    path.cubicTo(size.width*0.75,size.height*0.38,size.width*0.80,size.height*0.35,size.width*0.83,size.height*0.37);
    path.cubicTo(size.width*0.81,size.height*0.48,size.width*0.96,size.height*0.95,size.width,size.height*0.25);
    path.quadraticBezierTo(size.width*0.58,size.height*0.24,0,size.height*0.25);
    path.close();

    
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
  
}

Now, If we change the colors of the design. The ..color = Colors.red     and the background color to color: Colors.teal,  the design will look like the following.

If you like this post & helped you, please Patreon me.
Thanks