Search code examples
flutterflutter-layoutborder

How to create a jagged border in flutter


I want to create a jagged border around a container (see image below). Anyones know how to do that ?Jagged border example


Solution

  • I found a perfect solution. I use a ClipPath and add a CustomClipper:

    class HorizontalJaggedBorderClipper extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        Path path = Path();
        path.lineTo(size.width, 0);
        double y = 0;
        double x = size.width;
        double increment = size.height / 6;
        double delta = size.height * 0.15;
    
        while (y < size.height) {
          y += increment;
          x = (x == size.width) ? size.width - delta : size.width;
          path.lineTo(x, y);
        }
        path.lineTo(0, size.height);
        x = 0;
        while (y > 0) {
          x = (x == 0) ? delta : 0;
          y -= increment;
          path.lineTo(x, y);
        }
    
        path.close();
        return path;
      }
    
      @override
      bool shouldReclip(CustomClipper oldClipper) {
        return oldClipper != this;
      }
    }