How can I create a Rounded corner hexagon clipper in flutter

135 views Asked by At

How can I create a Rounded corner hexagon clipper in flutter? I want it to look like this:

enter image description here

I have managed to draw the path for the hexagon, but i have no luck when trying to add the curves, so component looks like this :

enter image description here

This is my code below.

@override
  Path getClip(Size size) {
    Path path = Path();

    path
      ..moveTo(size.width / 2, 0) // moving to topCenter 1st, then draw the path
      ..lineTo(size.width - 2, size.height * .25)
      ..arcToPoint(
        Offset(size.width, size.height * .25),
        radius: Radius.circular(7),
      )
      ..lineTo(size.width, size.height * .75)
      ..lineTo(size.width * .5, size.height)
      ..lineTo(0, size.height * .75)
      ..lineTo(0, size.height * .25)
      ..close();

    return path;
  }
0

There are 0 answers