I’m trying to create a custom bottom navigation bar in Flutter with a curved cutout similar to the following image:

The curve is not a perfect semicircle; instead, it has a smooth transition on the sides, giving it a more natural look. I noticed that the arc slightly bends before fully forming, making it look more dynamic. I attempted using ClipPath with CustomClipper, and my current code looks like this:

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

    double width = size.width;
    double height = size.height;
    double arcHeight = height * 0.6; // Adjusted height for the arc

    path.moveTo(0, 0);
    path.lineTo(width * 0.3, 0); 

    // Quadratic Bézier curve for smooth bending effect
    path.quadraticBezierTo(
      width * 0.1, arcHeight * 0.5, 
      width * 0.2, arcHeight
    );

    path.lineTo(width, height);
    path.lineTo(0, height);
    path.close();

    return path;
  }

However, this does not fully achieve the exact curve transition that I want. The arc is too sharp, and I need it to have a smoother bending effect before forming the cutout.

How can I improve the curve so that it transitions more smoothly from the sides before forming the main cutout?