0

Hi I have a circular container and I have to place smaller circular containers at 30 degrees apart on the bigger container (total 12 smaller circles). The smaller circular container center points should always on the circumference of the bigger circle and equally spaced. How can I achieve this in flutter. The smaller circle should always be on the bigger circle even if the bigger circle is scaled (responsive layout) How can I achieve this in flutter UI? Thanks.

Smaller circles on the large circle in flutter UI

MattPrash
  • 67
  • 5
  • you can use `CustomPainter`, or for simple solution, try to use `Transform` widget – pmatatias Aug 01 '23 at 01:58
  • 1
    You could use a Stack and have your large circle and all the smaller ones as children of the Stack. But wrap each child with a Positioned widget specifying the necessary left and top. – John Weidner Aug 01 '23 at 02:24
  • Thanks for the reply. But the problem is that I draw the big circle after a fractionally sized box for responsive layout. So when big circle position changes the small circle also needs to change accordingly. – MattPrash Aug 01 '23 at 06:27
  • why don't you use `FittedBox` instead? https://youtu.be/T4Uehk3_wlY – pskink Aug 01 '23 at 06:38
  • Fitted box would not work in my case. The smaller circles should always be on the larger circle circumference equally spaced even with scaling. – MattPrash Aug 01 '23 at 07:42
  • and this is exactly what `FittedBox` is doing - simply pass s `Stack` with large circle and multiple small circles – pskink Aug 01 '23 at 09:10

0 Answers0