how to give curve design inside container in flutter?

Question

I trying to understand how can I design curves in a container like the below can anyone help me to design this kind of container? much appreciate it if anyone provides code for this kind of design. Thank you in advance.

Answer 1

use Stack and boxDecoration, play with margins and size to get best result.

SizedBox(
          width: double.infinity,
          child: Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(40),
                  color: Colors.grey,
                  boxShadow: const [
                    BoxShadow(color: Colors.grey, spreadRadius: 3),
                  ],
                ),
                height: 50,
              ),
              Container(
                width: 200,
                child: const Center(
                  child: Text('\$1400'),
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(40),
                  color: const Color(0xff232fac),
                  boxShadow: const [
                    BoxShadow(color: Color(0xff232fac), spreadRadius: 3),
                  ],
                ),
                height: 50,
              ),
              Container(
                width: 200,
                margin: const EdgeInsets.only(left: 150),
                child: const Center(
                  child: Text('\$1400'),
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(40),
                  color: const Color(0xff483395),
                  boxShadow: const [
                    BoxShadow(color: Colors.white, spreadRadius: 3),
                  ],
                ),
                height: 50,
              ),
            ],
          ),
        ),

• read about Stack
• read about boxDecoration