Hey I have a custom Appbar and I want it to look like this:

So far I have successfuly created a custom app bar and clipped it with ClipPath to get a special form:

return ClipPath(
  clipper: WaveClip(),
  child: PreferredSize(
    preferredSize: preferredSize,
    child: Container(
      color: getAppBarColor(),
      child: Column(
        ...
      ),
    ),
  ),
);

But I have failed to create this exact app bar. My clip form looks like this:

class WaveClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double height = size.height;
    double width = size.width;
    double curveHeight = size.height / 2;
    var p = Path();
    p.lineTo(0, height - curveHeight);
    p.quadraticBezierTo(width / 4, height, width/2, height - curveHeight);
    p.lineTo(width, 0);
    p.close();
    return p;
  }
...

This results in some ugly wave like appbar. Is there any online tool that creates ClipPaths for me? I don't really want to have to bother with mathemical functions to create custom shapes