<p>In this article, I'm going to show you how to create a waveclipper in flutter.</p> <p>Below is what we are going to design for this example.</p> <p>![](https://fluttercentral.com/Uploads/fc8a8592-ca50-42f9-a07d-5b2f24bca63b.PNGwidth="50%height="auto](</p> <p>In this program, we are using ClipPath widget to clips its child (which is a container in this program) using a path.</p> <p>The path is specified in the below class.</p> <p>{</p> <p>@override</p> <p>Path getClip(Size size) {</p> <pre>var path = new Path();
path.lineTo(0.0, size.height - 40);
path.quadraticBezierTo(
size.width / 4, size.height - 80, size.width / 2, size.height - 40);
path.quadraticBezierTo(size.width - (size.width / 4), size.height,
size.width, size.height - 40);
path.lineTo(size.width, 0.0);
path.close();
return path; </pre> <p>}</p> <p>@override</p> <p>bool shouldReclip(CustomClipper oldClipper) {</p> <pre>return false; </pre> <p>}</p> <p>}</p> <p>quadratickBezierTo method adds a quadratic bezier segment that curves from the current point to the given point (x2,y2), using the control point (x1,y1). Below is the signature of the method,</p> <p>Below is how the values provided will reflect in the final curve. You can draw is upside down, by modifying the x1, y1.</p> <p>![](https://fluttercentral.com/Uploads/6dad00f1-1d2a-45c3-bcc9-bd63a759cadb.pngwidth="50%height="auto](</p> <p>The path.lineTo method adds a straight line segment from the current point to the given point. font-size: 1rem;](Below is the signature of the method,</p> <p>Here is the full code from main.dart file, you can simply copy-paste and run to check this example.</p> <p>color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());</p> <p>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override</p> <p>color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState(); }</p> <p>color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State { color: #4ec9b0;](double padValue = color: #b5cea8;](1; color: #569cd6;](@override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( home: color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(color: #ce9178;]("BottomWaveClipper"), ), body: color: #4ec9b0;](Center( child: color: #4ec9b0;](MyClipPath(), ), ), ); } }</p> <p>color: #569cd6;](class color: #4ec9b0;](MyClipPath color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](final color: #4ec9b0;](Color backgroundColor = color: #4ec9b0;](Colors.red; color: #569cd6;](@override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](ClipPath( clipper: color: #4ec9b0;](BottomWaveClipper(), child: color: #4ec9b0;](Container( color: backgroundColor, width: color: #b5cea8;](300, height: color: #b5cea8;](200, ), ); } }</p> <p>color: #569cd6;](class color: #4ec9b0;](BottomWaveClipper color: #569cd6;](extends color: #4ec9b0;](CustomClipper { color: #569cd6;](@override</p> <p>color: #4ec9b0;](Path color: #dcdcaa;](getClip(color: #4ec9b0;](Size size) { color: #569cd6;](var path = color: #c586c0;](new color: #4ec9b0;](Path(); path.color: #dcdcaa;](lineTo(color: #b5cea8;](0.0, size.height - color: #b5cea8;](40); path.color: #dcdcaa;](quadraticBezierTo( size.width / color: #b5cea8;](4, size.height - color: #b5cea8;](80, size.width / color: #b5cea8;](2, size.height - color: #b5cea8;](40); path.color: #dcdcaa;](quadraticBezierTo(size.width - (size.width / color: #b5cea8;](4), size.height, size.width, size.height - color: #b5cea8;](40); path.color: #dcdcaa;](lineTo(size.width, color: #b5cea8;](0.0); path.color: #dcdcaa;](close(); color: #c586c0;](return path; } color: #569cd6;](@override</p> <p id="569cd6;](false;" color:="" color:="">color: #4ec9b0;](bool color: #dcdcaa;](shouldReclip(color: #4ec9b0;](CustomClipper oldClipper) } `</p>