How can I create this circles for my flutter UI?

Question

I want to create those blue circles (you can see them on the picture), the app UI design was created with Figma.

I don't even know how to start, I'm new at flutter

Any ideas or tips?

Answer 1

You can start learning from flutter.dev . There are many ways to do this. I am using Container with decoration

Container(
  height: 70,
  width: 70,
  padding: EdgeInsets.all(10), //spacing using padding
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(width: 5, color: Colors.blue),
  ),
  child: const Material( //inner circle
    color: Colors.green,
    shape: CircleBorder(),
  ),
)

More about Container .