Flutter Clipper Radius

446 Views Asked by At

I have a make my Custom Clipper (Pentagon Shape) but I need to make all of the corners round a little bit.

Here's my Clipper Code:

class Pentagon extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width * 0.5, 0);
    path.lineTo(size.width, size.height * 0.38);  
    path.lineTo(size.width * 0.82, size.height);
    path.lineTo(size.width * 0.18, size.height);
    path.lineTo(0, size.height * 0.38);
    path.lineTo(size.width * 0.5, 0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
2

There are 2 best solutions below

1
On

Try to draw custom shape with this tool, fluttershapemaker

1
On

use StrokeCap.round to round the corners, demo example:

class CustomPainterPentagon extends CustomPainter{
  
  @override
  void paint(Canvas canvas, Size size) {
    
    

  Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.fill
      ..strokeWidth = 8.34;
      ..strokeCap = StrokeCap.round;

         
    Path path_0 = Path();
    path_0.moveTo(size.width*0.25,size.height*0.50);
    path_0.lineTo(size.width*0.31,size.height*0.40);
    path_0.lineTo(size.width*0.38,size.height*0.40);
    path_0.lineTo(size.width*0.44,size.height*0.50);
    path_0.lineTo(size.width*0.34,size.height*0.60);
    path_0.lineTo(size.width*0.25,size.height*0.50);
    path_0.close();

    canvas.drawPath(path_0, paint_0);
  
    
  }

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

And call it like:

child: CustomPaint(
  size: Size(800,500), //You can Replace this with your desired WIDTH and HEIGHT
  painter: CustomPainterPentagon(),
),