Flutter CustomClipper

Question

I am using Custom Clipper while creating these two widgets in Flutter, but there is a problem, how can I create it?

Update: can be used to crop from right side

class CustomRightClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width / 2, 0.0);
    path.lineTo(size.width * 0.37, 30);
    path.lineTo(0, 30);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomRightClipper oldClipper) => true;
}

Answer 1

For path will be like below, you can pass the gap with parameters or use relative width.

class BottomRightClipper extends CustomClipper<Path> {
  const BottomRightClipper({required this.isLeft});
  final bool isLeft;
  @override
  Path getClip(Size size) {
    final path = Path();
    if (isLeft) { /// separated to make it easier to understand for everyone
      path.moveTo(0, 0);
      path.lineTo(size.width, 0);
      path.lineTo(size.width - 40, size.height);
      path.lineTo(0, size.height);
      path.lineTo(0, 0);
    } else { //for right
      path.moveTo(40, 0);
      path.lineTo(size.width, 0);
      path.lineTo(size.width, size.height);
      path.lineTo(0, size.height);
      path.lineTo(40, 0);
    }
    return path;
  }

  @override
  bool shouldReclip(BottomRightClipper oldClipper) {
    return isLeft != oldClipper.isLeft;
  }
}

I will suggest to use shape parameter on different button. The extend OutlinedBorder or ShapeBorder and provide this same path.