How can I align little circles equally into a big circle? - flutter

Question

I've made one big rounded container and now I want to align different tiny circle containers equally into it. How can I do that without adjusting the position all the time? Is there a better way so that even when I change the size of the tiny circles, the position remain equally?
this is a piece of code:
return Material(
color: Colors.black,
child: Center(
child: Stack(
textDirection: TextDirection.ltr,
children: [
DialBottomCircle,
Positioned(
//maybe as buttons
child: CircleNumbers(
textNumber: '0',
),
bottom: 0,
top: 260.0,
left: 245.0,
),
Positioned(
child: CircleNumbers(
textNumber: '9',
),
bottom: -70.0,
top: 225.0,
left: 175.0),

Answer 1

use CustomMultiChildLayout, something like this:
#override
Widget build(BuildContext context) {
var numbers = List.generate(10, (index) => '$index');
return Material(
shape: CircleBorder(),
color: Colors.red,
child: CustomMultiChildLayout(
delegate: FooDelegate(numbers.length),
children: [
for (var i = 0; i < numbers.length; i++)
LayoutId(
id: i,
child: Material(
elevation: 4,
color: Colors.white,
shape: CircleBorder(),
clipBehavior: Clip.antiAlias,
child: InkWell(
splashColor: Colors.orange,
onTap: () => print('${numbers[i]} pressed'),
child: FittedBox(
child: Text(numbers[i]),
),
),
),
),
],
),
);
);
class FooDelegate extends MultiChildLayoutDelegate {
final int numChildren;
FooDelegate(this.numChildren);
#override
void performLayout(Size size) {
final s = Size.square(size.shortestSide / 6.5);
final radius = (size.shortestSide - s.shortestSide) * 0.45;
final childConstraints = BoxConstraints.tight(s);
final delta = ((size - s) as Offset) / 2;
for (var i = 0; i < numChildren; i++) {
layoutChild(i, childConstraints);
var angle = i * math.pi / 6;
var offset = Offset(math.cos(angle), math.sin(angle)) * radius;
positionChild(i, offset + delta);
}
}
#override
bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) => true;
}