Overlapping circles with Flutter

Question

I want to draw the below shape for my app. I can draw circles but couldn't intersect them with a different color.

How can I do that?

I draw 2 circles but the intersection of them was not a different color.

Answer 1

You can use Stack widget and use Positioned widget to place circle.

   final double circleRadius = 100;

    final circle = Container(
            height: circleRadius * 2,
            width: circleRadius * 2,
            decoration: ShapeDecoration(
              shape: const CircleBorder(),
              color: Colors.blue.withOpacity(.3),
            ),
          );

And using with Stack

SizedBox(
  width: circleRadius * 2,
  height: circleRadius * 1.5,
  child: Stack(
    children: [
      Positioned(
        top: -circleRadius * .5,
        left: -circleRadius,
        child: circle,
      ),
      Positioned(
        top: -circleRadius,
        child: circle,
      ),
      // circle
    ],
  ),
),

Will give you

Tweak the size & color.