How to create multiple circles using 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]
              ],
            ),
          ),
    
    
        );
      }
    }