Using Custom Paint to achieve the given shape

Question

So I want to achieve this shape using custom paint in flutter

and this is my code and the achieved result by far

const double _kCurveHeight = 30;

class ShapesPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Path path = Path();
    path.moveTo(0, _kCurveHeight+_kCurveHeight); // Move to top-left corner
    path.quadraticBezierTo(size.width / 2, 0, size.width, _kCurveHeight+_kCurveHeight); // Draw curve to top-right corner
    path.lineTo(size.width, size.height - _kCurveHeight-_kCurveHeight); // Draw to bottom-right corner
    path.quadraticBezierTo(size.width / 2, size.height, 0, size.height - _kCurveHeight-_kCurveHeight); // Draw curve to bottom-left corner
    path.lineTo(0, _kCurveHeight+_kCurveHeight); // Draw to top-left corner to close the path

    final Paint paint = Paint();
    paint.shader = LinearGradient(
      colors: [
        Color(0xff361398),
        Color(0xff002764),
      ],
      begin: Alignment.topLeft,
      end: Alignment.topRight,
    ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));

    canvas.drawPath(path, paint);
  }

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

The Achieved Result