Better approach to include two curves in the flutter UI

I am completely new to flutter and I've a problem that how to include curves in the UI as in the image below if necessary.

I've tried this somewhat (not completed) using the ClipOval widget which is wraped inside the Positioned widget inside a Stack widget. Can anyone tell me is this the correct approach or any other better ones?

Here's What I tried so far.

import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});


final backgroundColor = const Color(0xFFAFEDB3);
final ellipse1 = const Color(0xB2F1FFEC);
final ellipse2 = const Color(0xff9FE3A4);



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Login screen'),
      ),
      body: Container(
        // color: const Color.fromARGB(255, 154, 236, 156),
        decoration:  BoxDecoration(
          color: backgroundColor
,
        ),
        child: Stack(
          children: [
            Positioned(
              top: -90,
              left: -75,
              height: 320,
              width: 450,
              child: ClipOval(
                child: Container(
                  width: double.maxFinite,
                  height: 200,
                  color: ellipse1,
                  child: const Text(
                    'Green',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ),

            Positioned(
              top: -10,
              right: -25,
              height: 200,
              width: 200,
              child: ClipOval(
                child: Container(
                  width: double.maxFinite,
                  height: 200,
                  color: ellipse2,
                  child: const Text(
                    'Green',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Quick Answer:

Use CustomPainter to draw custom shapes.

If you have the image of your curve then try this awesome tool to convert your SVG image to dart custom paint code.

Detailed Answer:

To achieve custom shape designs in Flutter, you can use any of the following approaches:

1. Using image assets directly (SVG or PNG).
2. Using a combination of ClipPath and Stacks (similar to other answers).
3. CustomPainter to draw a shape for you.

Note: Before choosing the methods you should know your requirements, if performance and dynamically changing the shapes' color, position, or animating the shape is something you want then CustomPainter is the best choice. Read this to know why you should choose CustomPainter over the other two approaches.

Full conversation: Reddit Thread