I need to implement shape like image below.
After I research about it, I found CustomPaiter
and try to implement for awhile. I get this result.
I have no idea how to round corner of shape. Has anyone can guide me about it ?
My painter class.
class NamePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.white;
var path = Path();
path.moveTo(size.width * 0.2, 0);
path.lineTo(size.width * 0.1, size.height / 2);
path.lineTo(size.width * 0.2, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
CodePudding user response:
Here is your Clip Code... and also use Shape Maker to design such layout and you will get clip code
class NamePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.white;
Path path = Path();
path.moveTo(size.width*0.2883333,size.height*0.7857143);
path.cubicTo(size.width*0.1248167,size.height*0.5703571,size.width*0.1252000,size.height*0.5750857,size.width*0.1233333,size.height*0.5700000);
path.cubicTo(size.width*0.1237583,size.height*0.5689143,size.width*0.0837667,size.height*0.4985143,size.width*0.1231167,size.height*0.4277286);
path.quadraticBezierTo(size.width*0.0839833,size.height*0.4741857,size.width*0.2916667,size.height*0.2128571);
path.quadraticBezierTo(size.width*0.8189500,size.height*0.2181143,size.width*0.9582500,size.height*0.2158143);
path.quadraticBezierTo(size.width*0.9575417,size.height*0.2154429,size.width*0.9583333,size.height*0.7828571);
path.quadraticBezierTo(size.width*0.7908333,size.height*0.7835714,size.width*0.2883333,size.height*0.7857143);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}