CODEWITHSUNDEEP
flutterdart
t0m3r
t0m3r

Reputation: 497

How can I start a CustomClipper (ClipPath) from top right and NOT top left

My CustomClipper is going from the top left corner, but, I want it to start from the top right. Here's my code: The Clipper:

class ProfileBarClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = new Path();
    path.lineTo(0, size.height - 50);
    var controllPoint = Offset(50, size.height);
    var endPoint = Offset(size.width / 2, size.height);
    path.quadraticBezierTo(
        controllPoint.dx, controllPoint.dy, endPoint.dx, endPoint.dy);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);

    return path;
  }

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

The usage of ProfileBarClipper():

ClipPath(
    clipper: ProfileBarClipper(),
    child: Container(
        color: Colors.white,
        height: 200,
    ),
)

And here's an image of this code: https://i.sstatic.net/rVsL3.png

Upvotes: 1

Views: 353

Answers (1)

Josteve Adekanbi
Josteve Adekanbi

Reputation: 12703

Use the moveTo.

Like this.

var path = new Path();
path.moveTo(size.width,0); // (size.width, 0) means top right

UPDATE: Check this out...

class ProfileBarClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = new Path();
    path.moveTo(size.width, 0);
    path.lineTo(size.width, size.height - 50);
    var controllPoint = Offset(size.width-50, size.height);
    var endPoint = Offset(size.width / 2, size.height);
    path.quadraticBezierTo(
        controllPoint.dx, controllPoint.dy, endPoint.dx, endPoint.dy);
    path.lineTo(0, size.height);
    path.lineTo(0, 0);

    return path;
  }

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

The output:

enter image description here

Upvotes: 1

Related Questions