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!

"My idea is to instead of having this triangle have a smooth curve shape" it all depends on what smooth shape you want, like "a speed bump" or something else? — pskink, Jul 03 '23 at 04:02
Like you said “speed bump” or sth like a gauss bell shape. — Dave S., Jul 03 '23 at 04:39
take this `` simple svg file (you can edit with `inkscape` for example) as input to https://svg2p5.com/ and click "convert" - you will see something like "bezierVertex(0,7,2,8,2,10); bezierVertex(2,12,0,13,0,15);" this is the same what you should pass to [Path.cubicTo](https://api.flutter.dev/flutter/dart-ui/Path/cubicTo.html) methods - i mean 0,7 is the first control point 2,8 is the second control point and 2,10 is a final point — pskink, Jul 03 '23 at 05:00
Can you perhaps add an example image of what you are trying to achieve? — Afridi Kayal, Jul 03 '23 at 05:18

score 0 · Accepted Answer · answered Jul 03 '23 at 08:20

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

Flutter use ClipPath on Column Container

1 Answers1