How can I make these top 2 corner Radius Custom Clipper

Question

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.

call [roundPolygon](https://gist.github.com/pskink/adf730167a48b750a81f1dd197309312#file-round_polygon-dart-L24) to get the `Path` — pskink, Mar 07 '23 at 07:54

score 0 · Answer 1 · answered Mar 07 '23 at 07:13

0

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;
  }

answered Mar 07 '23 at 07:13

Md. Yeasin Sheikh

54,221
7
29
56

i'm just a starter i don't under stand your answer its not worl – Soun Savdan Mar 07 '23 at 07:20
It is fine & welcome, You can also use this path on Container shape(ShapeBorder/OutlinedBorder), but for now you can check [CustomPaint](https://api.flutter.dev/flutter/widgets/CustomPaint-class.html), this may provide you some example – Md. Yeasin Sheikh Mar 07 '23 at 07:23

score 0 · Answer 2 · answered Mar 07 '23 at 08:12

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

How can I make these top 2 corner Radius Custom Clipper

2 Answers2