Flutter: How to draw rounded rectangle with cutout CustomPainter

Question

I'm trying to create the rounded rectangle shape with the cutout from the following picture:

I'm using that as the base for my bottom nav menu. I'm not super savvy with the CutomPainter and have been unable to get something that I'm happy with. This is the closest I've come.

final backgroundPaint = Paint()..color = AppColors.BLUE_GREY;
final cutoutPaint = Paint()..color = Colors.grey;

final shapeBounds = Rect.fromLTWH(0, 0, size.width, size.height);

final centerAvatar = Offset(shapeBounds.center.dx, shapeBounds.top);

final avatarBounds = Rect.fromCircle(center: centerAvatar, radius: 40);

final backgroundPath = Path()
  ..moveTo(0, size.height / 2)
  ..addRRect(
      RRect.fromLTRBR(0, 0, size.width, size.height, Radius.circular(25)))
  ..close();
    
final cutoutPath = Path()
  ..moveTo((size.width / 2) - 20, 0)
  ..arcTo(avatarBounds, pi, -pi, false);

canvas.drawPath(backgroundPath, backgroundPaint);
canvas.drawPath(cutoutPath, cutoutPaint);

Which gives me something more like this:

I don't know if I should be trying to draw the whole thing using a single path instead? I started with a rounded rectangle and then just tried to add the cutout on top. I did experiment with just making it a single path and using an arc for the cutout, but I was not able to get that along with the rounded corners to work.

Answer 1

等待大神答复