
How can i do this in flutter, need help
I try this one but it did'nt work, it make only two arcs but i need four, if some one can help me to make this design.How can I make the above design, I tried but without success, I need help to make it in flutter with CustomClippath or CustomPaint widgets, Understanding how it works also escapes me a little, as does positioning a voluntary point on any side of my container and making a deformation there.
class CustomlipperTest extends CustomClipper<Path> {
CustomlipperTest({this.radius = 38});
final double radius;
@override
Path getClip(Size size) {
final Path path = Path();
final double v = radius * 2;
path.arcTo(
Rect.fromLTWH(0, 0, radius, radius),
degreeToRadians(180),
degreeToRadians(90),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * 0.4, 0, radius, radius),
degreeToRadians(270),
degreeToRadians(90),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * 0.4 + 36, -v / 2, 16, v - 10),
degreeToRadians(160),
degreeToRadians(-120),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * .4 + 50, 0, radius, radius),
degreeToRadians(200),
degreeToRadians(70),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * 0.8, 0, radius, radius),
degreeToRadians(270),
degreeToRadians(70),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * 0.8 + 36, -v / 2, 16, v - 10),
degreeToRadians(160),
degreeToRadians(-140),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * .8 + 50, 0, radius, radius),
degreeToRadians(200),
degreeToRadians(70),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * .8 + 50, 0, radius, radius),
degreeToRadians(200),
degreeToRadians(70),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * .8 + 50, 0, radius, radius),
degreeToRadians(200),
degreeToRadians(70),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * .4 + 50, size.height, radius, radius),
degreeToRadians(90),
degreeToRadians(90),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * .4 + 36, size.height - v / 2 + 10, 16, v - 10),
degreeToRadians(-22),
degreeToRadians(-130),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * .4, size.height - radius, radius, radius),
degreeToRadians(0),
degreeToRadians(100),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * .8 + 50, size.height - radius, radius, radius),
degreeToRadians(90),
degreeToRadians(90),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * .8 + 36, size.height - v / 2 + 10, 16, v - 10),
degreeToRadians(-22),
degreeToRadians(-130),
false,
);
path.arcTo(
Rect.fromLTWH(size.width * .8, size.height - radius, radius, radius),
degreeToRadians(0),
degreeToRadians(100),
false,
);
path.arcTo(
Rect.fromLTWH(0, size.height - radius, radius, radius),
degreeToRadians(90),
degreeToRadians(90),
false,
);
path.lineTo(0, radius);
return path;
}
@override
bool shouldReclip(CustomClipper oldClipper) => true;
double degreeToRadians(double degree) {
final double redian = (math.pi / 180) * degree;
return redian;
}
}