How to make a background with this curve?

Question

I received a mockup and on some screens the background has this curve, but not an easy idea of how to do this, with widgets. Can anyone give me suggestions?

background: linear-gradient(320.82deg, #FA709A 0%, #FEC140 100%);
box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.21);

UPDATE

I'm putting the svg of the colored part that I believe is the biggest flaw

<svg width="375" height="563" viewBox="0 0 375 563" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_i)">
<path d="M0 59.4317C0 42.8632 13.4315 29.4317 30 29.4317H342H345.568C361.823 29.4317 375 16.2547 375 0V281.5V548C375 556.284 368.284 563 360 563H15C6.71574 563 0 556.284 0 548V59.4317Z" fill="url(#paint0_linear)"/>
</g>
<defs>
<filter id="filter0_i" x="0" y="0" width="375" height="567" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
</filter>
<linearGradient id="paint0_linear" x1="375" y1="563" x2="-37.9549" y2="29.3719" gradientUnits="userSpaceOnUse">
<stop stop-color="#FA709A"/>
<stop offset="1" stop-color="#FEC140"/>
</linearGradient>
</defs>
</svg>

Answer 1

I have created the same background using CustomClipper and PysicalShape. Here is the code:

import 'package:flutter/material.dart';

class MainWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Padding(
            padding: EdgeInsets.all(10),
            child: PhysicalShape(
              clipBehavior: Clip.antiAlias,
              clipper: RoundCornerClipper(),
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.bottomRight,
                    end: Alignment.topLeft,
                    colors: [
                      const Color(0xFFFA709A),
                      const Color(0xFFFEC140),
                    ],
                  ),
                ),
                width: 200,
                height: 200,
              ),
              color: Colors.transparent,
              elevation: 2,
              shadowColor: Colors.grey,
            )),
      ),
    );
  }
}

class RoundCornerClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double radius = 30;

    Path path = Path()
      ..moveTo(size.width, 0)
      ..lineTo(size.width, size.height - radius)
      ..quadraticBezierTo(
          size.width, size.height, size.width - radius, size.height)
      ..lineTo(radius, size.height)
      ..quadraticBezierTo(0, size.height, 0, size.height - radius)
      ..lineTo(0, radius * 2)
      ..arcToPoint(
        Offset(radius, radius),
        radius: Radius.circular(radius),
      )
      ..lineTo(size.width - radius, radius)
      ..arcToPoint(Offset(size.width, 0),
          radius: Radius.circular(radius), clockwise: false)
      ..close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}