Make Flutter Container Width Exceed Screen Width (MFCWESW)

AVAILABLE:    5

How can I create a container with rounded corners as shown below? I tried using a container with a width larger than the screen width, but it limits the container within the screen.

I attempted using an OverflowBox, but I didn’t get the same result either. I don't want to use ClipRect to achieve this because I want to apply an animation to the corners.

Here’s the container code with the generated result to clear any doubts:

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    body: Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        height: 500,
        decoration: BoxDecoration(
            color: Colors.green, borderRadius: BorderRadius.circular(500)),
      ),
    ),
  );
}

I was able to achieve something similar to what I wanted by using a scale transformation. However, I would still like to explore a different approach.

I’ve done this using ClipPath. If you resize the container, the ClipPath size automatically adjusts to the container's size.

You can modify the path to create different shapes as needed, so this is quite useful. Here, I am just using the ClipPath widget and creating a MyCustomShape class to modify the shape of the container’s child widget.

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black87,
      body: ClipPath(
        clipper: MyCustomShape(),
        child: Container(
          color: Colors.green[800],
          height: double.infinity,
        ),
      ),
    );
  }
}

class MyCustomShape extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = new Path();  // use for shaping your container
    path.lineTo(0.0, 100);
    path.quadraticBezierTo(size.width * 0.5, 0.0, size.width, 100);
    path.lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    path.close();
    return path;
  }
}