fluttermobileflutter-clippath

Flutter use ClipPath on Column Container


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.

enter image description here

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!


Solution

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