Wave Background Flutter Assistance

I have been struggling with this problem for the past 3ish days. Basically, I want the homepage of my app to have a wavelike pattern at the bottom of the screen. It is similar to this:

However, I want my version of the wave to look like this:

How would I do this in flutter? I don't want to manually draw it and then use it as a jpg or png, I want to make it using containers or something native to flutter. Thanks!

Register and use this online tool to generate the curve.

https://fluttershapemaker.com

Watch this video to get an idea, how to use the tool

shapemaker video tutorial

Finally generate the class from the tool and use it.

Here is a sample code

import 'package:flutter/material.dart';

class RPSCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint0 = Paint()
      ..color = const Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;

    Path path0 = Path();
    path0.moveTo(size.width * 0.0029500, size.height * 0.5714286);
    path0.quadraticBezierTo(size.width * 0.0394500, size.height * 0.5007143,
        size.width * 0.0999500, size.height * 0.5000000);
    path0.quadraticBezierTo(size.width * 0.1583100, size.height * 0.5003571,
        size.width * 0.2039500, size.height * 0.5685714);
    path0.quadraticBezierTo(size.width * 0.2407000, size.height * 0.5006429,
        size.width * 0.2999800, size.height * 0.4993571);
    path0.quadraticBezierTo(size.width * 0.3602400, size.height * 0.5010714,
        size.width * 0.4003700, size.height * 0.5700000);
    path0.quadraticBezierTo(size.width * 0.4403600, size.height * 0.5012714,
        size.width * 0.5000700, size.height * 0.5000000);
    path0.quadraticBezierTo(size.width * 0.5604700, size.height * 0.5002286,
        size.width * 0.6011100, size.height * 0.5695857);
    path0.quadraticBezierTo(size.width * 0.6403500, size.height * 0.5004429,
        size.width * 0.7000400, size.height * 0.4998714);
    path0.quadraticBezierTo(size.width * 0.7604000, size.height * 0.4992857,
        size.width * 0.8011100, size.height * 0.5671429);
    path0.quadraticBezierTo(size.width * 0.8406100, size.height * 0.4996429,
        size.width * 0.9002000, size.height * 0.5000000);
    path0.quadraticBezierTo(size.width * 0.9602000, size.height * 0.4982143,
        size.width * 1.0029500, size.height * 0.5685714);
    path0.cubicTo(
        size.width * 0.7529500,
        size.height * 0.5692857,
        size.width * 0.7529500,
        size.height * 0.5692857,
        size.width * 0.0029500,
        size.height * 0.5714286);
    path0.close();

    canvas.drawPath(path0, paint0);
  }

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

Add this to widget tree

@override
  Widget build(BuildContext context) {
    double curveWidth = MediaQuery.of(context).size.width;
    return Scaffold(
        body: Column(children: [
      //
      CustomPaint(
        size: Size(
            curveWidth,
            (curveWidth * 0.7)
                .toDouble()), //You can Replace [curveWidth] with your desired width for Custom Paint and height will be calculated automatically
        painter: RPSCustomPainter(),
      ),
    ]));
  }