Create color with round in a widget - Flutter

Question

I cant able to achieve this round design below the Banana image.

When i try to add gradient, it is not creating sharp differentiator.

How can i achieve this in Flutter.

Answer 1

You will just need a Stack widget & place a Container with a circular shape.

To create a circle, you can use the shape property of Container & set it to BoxShape.circle. Then, place the remaining widgets on top of each other.

The resulting output of the below code is as follows:

Your code should look something like this:

return Stack(
  children: [
    // Green Background
    Container(
      height: 400,
      decoration: BoxDecoration(
        color: Colors.green,
      ),
    ),

    // Circle
    Positioned(
      right: -50,
      top: -50,
      child: Container(
        height: 300,
        width: 300,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.black12,
        ),
      ),
    ),

    Positioned(
      top: 20,
      right: 20,
      left: 20,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Expanded(
                  child: TextFormField(
                decoration: InputDecoration(
                  filled: true,
                  hintText: 'Search for products',
                ),
              )),
              IconButton(icon: Icon(Icons.search), onPressed: () {}),
            ],
          ),
          Container(
            margin: const EdgeInsets.only(top: 40),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  child: Text('BANANA 5% OFF',
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 30,
                      ),),
                ),
                Expanded(
                  child: Container(
                    height: 150,
                    width: 150,
                    color: Colors.white10,
                    alignment: Alignment.center,
                    child: Text('Image'),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
);