Max
Max

Reputation: 1301

Rounding corners for skew using CustomClipper

I have 2 containers for which I make skews for one container on the right side, a skew for the other - on the left side, a skew. But I encountered a problem that I cannot add roundings for the corners that I have bevels, I need to add roundings to all skew corners, how to implement this?

class LeftSkewClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(15, size.height);

    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

class RightSkewClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(0, 0);
    path.lineTo(size.width - 15, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

screenshot, now

enter image description here

I need to do it like this enter image description here

Upvotes: 1

Views: 39

Answers (0)

Related Questions