Custom bottom Navigation Design

Question

I am trying to implement custom curved shape like below left image.

Below is the code what I have achieved so far by using quadraticBezierTo:

        class CustomNotchedShape extends NotchedShape {
          final BuildContext context;
          const CustomNotchedShape(this.context);

          @override
          Path getOuterPath(Rect host, Rect? guest) {
            const radius = 110.0;
            const lx = 40.0;
            const ly = 20;
            const bx = 10.0;
            const by = 50.0;
            var x = (MediaQuery.of(context).size.width - radius) / 2 - lx;
            return Path()
              ..moveTo(host.left, host.top)
              ..lineTo(x, host.top)
              ..quadraticBezierTo(x + bx, host.top, x += lx, host.top - ly)
              ..quadraticBezierTo(
                  x + radius / 2, host.top - by, x += radius, host.top - ly)
              ..quadraticBezierTo((x += lx) - bx, host.top, x, host.top)
              ..lineTo(host.right, host.top)
              ..lineTo(host.right, host.bottom)
              ..lineTo(host.left, host.bottom);
          }
        }