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.

CodePudding user response：

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,
              ),
            ],
          ),
        ),