Flutter BottomAppBar with specific shape - flutter

Question

Could you suggest my how to implement BottomAppBar with shape as you could see in picture bellow
I'm trying to wrap BottomAppBar with ClipRRect
return ClipRRect(
borderRadius: BorderRadius.vertical(
top: Radius.circular(40),
),
child: BottomAppBar(
key: widget.key,
shape: widget.notchedShape,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: items,
),
color: Colors.red, //widget.backgroundColor,
),
);
But result is not as I wish

Answer 1

You can use CustomPainter() and using that you can make your own design.
This is not perfect as you have shown by you but you can always tweak the setting on your own.
class MyCustomPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint_0 = new Paint()
..color = Colors.white
..style = PaintingStyle.fill;
Path path_0 = Path();
path_0.moveTo(size.width * 0.0500000, size.height * 0.9000000);
path_0.cubicTo(
size.width * 0.5000000,
size.height * 0.8400000,
size.width * 0.4975000,
size.height * 0.8380000,
size.width * 0.9500000,
size.height * 0.9000000);
path_0.quadraticBezierTo(
size.width * 1, size.height * 0.9, size.width, size.height);
path_0.lineTo(0, size.height);
path_0.quadraticBezierTo(size.width * 0, size.height * 0.90,
size.width * 0.0500000, size.height * 0.9000000);
path_0.close();
canvas.drawPath(path_0, paint_0);
canvas.drawShadow(path_0, Color(0x68FFFFFF), 8, true);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
Output