flutter

Flutter CustomClipper


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

enter image description here

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

Solution

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

    enter image description here

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