How can I make these top 2 corner Radius Custom Clipper

292 Views Asked by At
Path getClip(Size size) {
    var path = Path();
    path.lineTo(25,0);
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width-25, 0);
    return path;
  }

this is my custom clipper and I want to make top 2 corner radius

The image trying to get.

2

There are 2 best solutions below

2
On

Firstly moving the current path.

Path getClip(Size size) {
    double gap  = 25.0;
    var path = Path();
    path.moveTo(gap, 0); //top left
    path.lineTo(0, size.width-gap);//top right
    path.lineTo(size.width, size.height);// bottom right
    path.lineTo(0, size.height);//bottom left
    path.lineTo(gap, 0);//connect the top left
    return path;
  }
0
On
SizedBox(
      height: 80,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: [
            Expanded(
              child: ClipPath(
                  clipper: AngleClipper(),
                  child: const ColoredBox(
                    color: Colors.red,
                    child: SizedBox(width: double.maxFinite, height: 100),
                  )),
            ),
            Expanded(
              child: ClipPath(
                  clipper: AngleClipper(),
                  child: const ColoredBox(
                    color: Colors.red,
                    child: SizedBox(width: double.maxFinite, height: 100),
                  )),
            ),
            Expanded(
              child: ClipPath(
                  clipper: AngleClipper(),
                  child: const ColoredBox(
                    color: Colors.red,
                    child: SizedBox(width: double.maxFinite, height: 100),
                  )),
            ),
          ],
        ),
      ),
    )

Screenshot enter image description here