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