How can I use clippath to customise a container as shown in the image below?

42 Views Asked by At

enter image description here

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

There are 0 best solutions below