flutter custom paint responsive issue

I have this design (shown in the photo) and I am using custom paint to do it and I made it responsive. its looking good on some screens(on the left) but on wider screens(on the right), it's not looking how it suppose to, how to make it look like the one in green.

this is my custom paint code:

class CustomBottomBar extends CustomPainter {
  CustomBottomBar({this.fillColor});
  Color fillColor;
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint_0 = new Paint()
      ..color = fillColor
      ..style = PaintingStyle.fill
      ..strokeWidth = 1;

    Path path_0 = Path();
    path_0.moveTo(0, 0);
    path_0.lineTo(size.width * 0.30, 0);
    path_0.lineTo(size.width * 0.50, size.height * 0.62);
    path_0.lineTo(size.width * 0.70, 0);
    path_0.lineTo(size.width, 0);
    path_0.lineTo(size.width, size.height);
    path_0.lineTo(0, size.height);
    path_0.lineTo(0, 0);
    path_0.close();

    canvas.drawPath(path_0, paint_0);

    
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}