Flutter use ClipPath on Column Container

Question

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!

Answer 1

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