How to create multiple circles using flutter - flutter

Question

i am new to the flutter, need to create 12 circles around circle with proper angle, pls help to find proper answer with mathematically correct. pls refer the above diagram.
I have just faced the same issue...
Easy workaround:
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.green.withOpacity(0.25), // border color
shape: BoxShape.circle,
),
child: Padding(
padding: EdgeInsets.all(2), // border width
child: Container( // or ClipRRect if you need to clip the content
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue, // inner circle color
),
child: Container(), // inner content
),
),
),

Answer 1

You Just Need To Run This Code:
import 'package:flutter/material.dart';
import 'circle_file.dart';
import 'dart:math' as math;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const CircelFile(),
);
}
}
class CircelFile extends StatefulWidget {
const CircelFile({Key? key}) : super(key: key);
#override
State<CircelFile> createState() => _CircelFileState();
}
class _CircelFileState extends State<CircelFile> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Stack(
children: [
Container(
width:300,
height: 300,
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),
),
Container(
height:1.0,
width:70,
color:Colors.black,),
Container(
width: 70,
height: 70,
decoration: BoxDecoration(
color: Colors.green, // border color
shape: BoxShape.circle,
),
),
Container(
height:1.0,
width:70,
color:Colors.black,),
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),
),
],
),
),
Positioned(
left: 136,
top: 18,
child: Column(
children: [
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),
),
Container(
height:70,
width:1,
color:Colors.black,),
],
),
),
Positioned(
left: 136,
bottom:15,
child: Column(
children: [
Container(
height:70,
width:1,
color:Colors.black,),
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),
),
],
),
),
Positioned(
left: 197,
bottom:36,
child: Transform.rotate(
angle: -math.pi /4,
child: Column(
children: [
Container(
height:70,
width:1,
color:Colors.black,),
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),
),
],
),
),
),
Positioned(
left:70,
top: 160,
child: RotationTransition(
turns: AlwaysStoppedAnimation(-20 / 23),
child: Column(
children: [
Container(
height:70,
width:1,
color:Colors.black,),
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),),
],
),
),
),
Positioned(
right: 65,
top: 55,
child: RotationTransition(
turns: AlwaysStoppedAnimation(-20 / 58),
child: Column(
children: [
Container(
height:70,
width:1,
color:Colors.black,),
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),),
],
),
),
),
Positioned(
left: 70,
top: 40,
child: RotationTransition(
turns: AlwaysStoppedAnimation(-20 / 32),
child: Column(
children: [
Container(
height:70,
width:1,
color:Colors.black,),
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),),
],
),
),
),[enter link description here][1]
],
),
),
);
}
}