Shaping Container using Bezier Curve in Flutter

Question

Up to this point, I wasn't aware that we could make shapes of our choices in Flutter and hence I'm totally new to this. I would like to shape my container to resemble the below design but I am totally short of ideas as to how this can be done. I did a bit of reading to find out about the concepts of the Bezier Curve but upon trying to apply that knowledge to the container below, I ended up getting something pretty horrendous. The screenshots and the code are as follows:

This is what I ended up getting:

class ProfilePage extends StatefulWidget {
  ProfilePageState createState() => ProfilePageState();
}

class ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;

    // TODO: implement build
    return Scaffold(
      body: Container(
        height: height * 1,
        width: width * 1,
        color: Colors.red,
        child: Column(
          children: [
            Stack(
              children: [
                ClipPath(
                  clipper: CurvedAppBar(),
                  child: Container(
                    height: height * 0.2,
                    width: double.infinity,
                    color: Colors.white,
                  ),
                ),
                Positioned(child: Image.asset('assets/images/logo-with-bg.png'))
              ],
            )
          ],
        ),
      ),
    );
  }
}



import 'package:flutter/material.dart';
    
    class CurvedAppBar extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        var path = Path();
        path.lineTo(0, size.height);
        var firstStart = Offset(size.width / 5, size.height);
        var firstEnd = Offset(size.width / 2.25, size.height - 50);
        path.quadraticBezierTo(
            firstStart.dx, firstEnd.dy, firstEnd.dx, firstEnd.dy);
    
        var secondStart =
            Offset(size.width - (size.width / 3.24), size.height - 105);
        var secondEnd = Offset(size.width, size.height - 10);
        path.quadraticBezierTo(
            secondStart.dx, secondStart.dy, secondEnd.dx, secondEnd.dy);
        path.lineTo(size.width, 0);
    
        path.close();
        return path;
      }
    
      @override
      bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
        // TODO: implement shouldReclip
        return false;
      }
    }

Any ideas how this can be shaped?