Home Flutter Flutter Draw Bezier Curve with ClipPath

Flutter Draw Bezier Curve with ClipPath

Flutter Bezier Curve Wave using customClipper
Flutter Bezier Curve Wave using customClipper

Hi Guy’s Welcome to Proto Coders Point, In this flutter tutorial we learn how to create a Bezier Curve which looks like a water wave.

To draw a Bezier curve in flutter we will be using ‘ClipPath’ widget using we can give any shape to it’s child(Container).


  • Create a class that extends CustomClipper class
  • Override CustomClipper class methods i.e. getClips and shouldReclip
  • In getClip() method define the cliping shape
  • then finally provide the customclipper class to ClipPath Widget

CustomClipper Class

The Below clip path code will give a curve shape, that will can then apply to ClipPath widget

path.lineTo(0, size.height * 0.75); Will draw a straight line from current position to the height been defined.

The first path.quadraticBezierTo() will draw a first half of Bezier curve from current point.

The second path.quadraticBezierTo() draw a second half Bezier curve making it look like a water wave.

then finally path.lineTo(size.width,0); draw a straight line from the last curve point to the top-right corner that’s completes the clipPath class.

class BezierClipper extends CustomClipper<Path>{
  Path getClip(Size size) {
   Path path = Path();
   path.lineTo(0, size.height * 0.75);

       size.width * 0.25,
       size.height * 0.5,
       size.width * 0.5,
       size.height * 0.75
       size.width * 0.75,
       size.height * 1,
       size.height * 0.75
   return path;

  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;

Use CustomClipper class into ClipPath widget to clips

      body: Stack(
        children: [
            color: Colors.blueAccent,
            clipper: BezierClipper(),
            child: Container(
              color: Colors.black,
              height: 400,