In this article, I'm going to show you how to create a waveclipper in flutter.
Below is what we are going to design for this example.
![](https://fluttercentral.com/Uploads/fc8a8592-ca50-42f9-a07d-5b2f24bca63b.PNGwidth="50%height="auto](
In this program, we are using ClipPath widget to clips its child (which is a container in this program) using a path.
The path is specified in the below class.
{
@override
Path getClip(Size size) {
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;
}
@override
bool shouldReclip(CustomClipper oldClipper) {
return false;
}
}
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,
Below is how the values provided will reflect in the final curve. You can draw is upside down, by modifying the x1, y1.
![](https://fluttercentral.com/Uploads/6dad00f1-1d2a-45c3-bcc9-bd63a759cadb.pngwidth="50%height="auto](
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,
Here is the full code from main.dart file, you can simply copy-paste and run to check this example.
color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget {
color: #569cd6;](@override
color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState();
}
color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State {
color: #4ec9b0;](double padValue = color: #b5cea8;](1;
color: #569cd6;](@override
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(),
),
),
);
}
}
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
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,
),
);
}
}
color: #569cd6;](class color: #4ec9b0;](BottomWaveClipper color: #569cd6;](extends color: #4ec9b0;](CustomClipper {
color: #569cd6;](@override
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
color: #4ec9b0;](bool color: #dcdcaa;](shouldReclip(color: #4ec9b0;](CustomClipper oldClipper) {
color: #c586c0;](return color: #569cd6;](false;
}
}
`