I'm playing around with flutter doing some personal projects. I'm learning a bit about complex UIs and it's been quite hard. I've looked into documentation, some blogs, and still have no idea how to properly define x, y points using Flutter ClipPath.
My idea is to instead of having this triangle have a smooth curve shape. I've tried with different combinations, still no idea how to clip and curve this triangle.
My current custom clipper it's something like this.
@override
Path getClip(Size size) {
Path path = Path();
path.lineTo(size.width, size.height * 0.5);
path.lineTo(0, size.height);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
Any advice on how to get the x,y coordinates to clip properly this triangle is much appreciated. I know I have to use the quadratic bezier in flutter, but at this point I'm pretty much stuck.
Thanks!
Below is an example based on @pskink's suggestion. Just replace the .lineTo()
calls in your CustomClipper
class with .cubicTo()
calls.
You can change the height and width of the Container
and the x/y values in the cubicTo()
calls to alter the shape of the curve.
If you want to draw specific curves/shapes, you will have to do the Maths first to calculate the exact coordinates.
class CurveClipper extends StatelessWidget {
const CurveClipper({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Curve Clipper'),
),
body: Center(
child: ClipPath(
clipper: CustomBezierClipper(),
child: Container(
color: Colors.blueGrey,
height: 200,
width: 50,
),
),
),
);
}
}
class CustomBezierClipper extends CustomClipper<Path> {
@override
getClip(Size size) {
Path path = Path();
path.cubicTo(0, size.height / 4, size.width, size.height / 4, size.width,
size.height / 2);
path.cubicTo(size.width, size.height * 3 / 4, 0, size.height * 3 / 4, 0,
size.height);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper oldClipper) => false;
}