EN VI

Flutter make Clipper Path?

How to Flutter make Clipper Path

I want to use the Flutter Custom Clipper to create a shape like the picture below, but it doesn't work. Is there anyone who can help?

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    List<Offset> polygon = [
      Offset(0, 10),
      Offset(size.width - 30, 10),
      Offset(size.width - 25, 0),
      Offset(size.width - 20, 10),
      Offset(size.width, 10),
      Offset(size.width, size.height),
      Offset(0, size.height),
      Offset(0, 10),
    ];

    Path path = Path()
      ..addPolygon(polygon, false)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

[Svg code]

<svg width="132" height="110" viewBox="0 0 132 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M111.858 1.73511L111.434 1.05619L111.01 1.73512L107.096 8H5.997C2.96081 8 0.5 10.4627 0.5 13.5V103.5C0.5 106.537 2.96081 109 5.997 109H125.925C128.961 109 131.422 106.537 131.422 103.5V13.5C131.422 10.4627 128.961 8 125.925 8H115.771L111.858 1.73511Z" fill="white" stroke="#EAECEE"/>
</svg>

Actually, I used this path through polygon, but I couldn't give it a border, so I guess I don't know much.

Solution:

Try this

class MyCustomClipper extends CustomPainter {
    @override
    void paint(Canvas canvas, Size size) {
            
Path path_0 = Path();
    path_0.moveTo(111.858,1.73511);
    path_0.lineTo(111.434,1.05619);
    path_0.lineTo(111.01,1.73512);
    path_0.lineTo(107.096,8);
    path_0.lineTo(5.997,8);
    path_0.cubicTo(2.96081,8,0.5,10.4627,0.5,13.5);
    path_0.lineTo(0.5,103.5);
    path_0.cubicTo(0.5,106.537,2.96081,109,5.997,109);
    path_0.lineTo(125.925,109);
    path_0.cubicTo(128.961,109,131.422,106.537,131.422,103.5);
    path_0.lineTo(131.422,13.5);
    path_0.cubicTo(131.422,10.4627,128.961,8,125.925,8);
    path_0.lineTo(115.771,8);
    path_0.lineTo(111.858,1.73511);
    path_0.close();

Paint paint_0_stroke = Paint()..style=PaintingStyle.stroke..strokeWidth=2;
paint_0_stroke.color=Color(0xffEAECEE).withOpacity(1.0);
canvas.drawPath(path_0,paint_0_stroke);

Paint paint_0_fill = Paint()..style=PaintingStyle.fill;
paint_0_fill.color = Colors.white.withOpacity(1.0);
canvas.drawPath(path_0,paint_0_fill);

using Flutter Shape Maker you can create CustomPainter code from any svg.