Question 75832 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I make these top 2 corner Radius Custom Clipper – Flutter

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.

Tags:

2

Answers


  1. 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;
  }
    Login or Signup to reply.
  2. 0 
    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search