'How to create a curved container in flutter

I'm trying to create this design in flutter enter image description here

when i try to increase the height of curved container to create the MyDocs container design, its curved get disturb. please help how to do this.

here is my code

Widget build(BuildContext context) {
    return SafeArea(
        child: Container(
      child: Column(children: [
        ClipPath(
          clipper: ProsteThirdOrderBezierCurve(
            position: ClipPosition.bottom,
            list: [
              ThirdOrderBezierCurveSection(
                p1: Offset(0, 100),
                p2: Offset(0, 210),
                p3: Offset(MediaQuery.of(context).size.width, 100),
                p4: Offset(MediaQuery.of(context).size.width, 200),
              ),
            ],
          ),
          child: Container(
            decoration: const BoxDecoration(
              color: Color.fromARGB(255, 52, 84, 109),
            ),
            height: 200,
            child: Column(children: [
              const SizedBox10(),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height * 0.07,
                  child: TextField(
                    decoration: InputDecoration(
                        suffixIcon: const Icon(Icons.search),
                        contentPadding: const EdgeInsets.all(20.0),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(30.0),
                        ),
                        filled: true,
                        hintStyle: TextStyle(color: Colors.grey[800]),
                        hintText: "Search...",
                        fillColor: Colors.white70),
                  ),
                ),
              ),
            ]),
          ),
        ),

here is its output

enter image description here



Solution 1:[1]

You can use ClipPath widget, with custom clippers.

For custom clippers you can try flutter_custom_clippers package.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Varun S Athreya