How to add background motif in flutter

Question

I want to add background that has circle like picture below:

And in my Figma, has asset like this:

And my code is like this:

Widget buildItem(int index) => Card(
        color: ColorName.brandSecondaryBlue,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
        ),
        child: Container(
          padding: const EdgeInsets.only(top: 20, bottom: 20),
          child: buildItem(),
        ),
      );

Anyone else who know how to add it?

Answer 1

May not be a clean way but try Using a Stack widget and use Positioned widget inside.

Here's a sample for what you are trying to achieve.

Scaffold(
        body: Center(
          child: Stack(
            children: [
              Container(
                width: 300,
                height: 150,
                decoration: BoxDecoration(
                  color: Colors.indigo,
                  borderRadius: BorderRadius.circular(20)
                ),
              ),
              
              Positioned(
                left: -50,
                top: -35,
                child: Stack(
                  alignment: AlignmentDirectional.center,
                  children:
                  [
                    Container(
                  width: 150,
                  height: 150,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(100)
                  ),),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          color: Colors.indigo,
                          borderRadius: BorderRadius.circular(100)
                      ),),

                  ]
                ))
            ],
          ),
        )
      )