Space this evenly according to the circles, ignoring the space taken up by the text - flutter

Question

I have this widge in flutter
I am using a Progress Bar because eventually there will be progress, this is an example
class MyWidget extends StatelessWidget {
const MyWidget({
Key key,
}) : super(key: key);
final double containersWidth = 510;
#override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
width: containersWidth,
padding: EdgeInsets.only(top: 12.0),
child: Stack(
children: [
Positioned(
top: 14.0,
width: containersWidth,
child: LinearProgressIndicator(
value: 0,
backgroundColor: Colors.amberAccent,
minHeight: 3,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.redAccent),
),
),
Container(
width: containersWidth,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_Circle(),
_Circle(),
_Circle(),
_Circle(),
_Circle(),
_Circle(),
],
),
),
],
),
);
}
}
class _Circle extends StatelessWidget {
const _Circle({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 30.0,
height: 30.0,
decoration: new BoxDecoration(
color: Colors.amberAccent,
shape: BoxShape.circle,
),
),
],
);
}
}
This produces a layout like this one, which is fine
Now, I need to add a label under each circle, but keep the space the same as the image, but when I do this,
class _Circle extends StatelessWidget {
const _Circle({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 30.0,
height: 30.0,
decoration: new BoxDecoration(
color: Colors.amberAccent,
shape: BoxShape.circle,
),
),
Text('example')
],
);
}
}
the width of the container increases, and since the space is counted from the center of the container, I obtain something like this
I need the circles placed as in the first image, and the labels under the circles, centered, but not being counted as part of the width of the container.
I tried to used Positioned to wrap the labels but it didn't work because the overflow is hidden and also I was not able to position the text centered from the circle. Any help is greatly appreciated.
Edit:
this is how it looks when using Positioned
with the following code
class _Circle extends StatelessWidget {
const _Circle({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
width: 30.0,
height: 30.0,
decoration: new BoxDecoration(
color: Colors.amberAccent,
shape: BoxShape.circle,
),
),
Positioned(
top: 14,
child: Text('example')
)
],
);
}
}
The overflow is hidden, and besides, I don' know how to center the text relative to the Stack ( and the circle)
I am thinking I have to use SizedOverflow box, I will see if I can figure it out

Answer 1

I was able to solve it like this
class MyWidget extends StatelessWidget {
const MyWidget({Key key}) : super(key: key);
final double containersWidth = 510;
#override
Widget build(BuildContext context) {
return Container(
height: 30,
alignment: Alignment.center,
width: containersWidth,
padding: EdgeInsets.only(top: 12.0),
child: Stack(
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
LinearProgressIndicator(
value: 0,
backgroundColor: Colors.yellowAccent,
minHeight: 3,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.yellowAccent),
),
Container(
// color: Colors.redAccent.withAlpha(100),
width: containersWidth,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_Circle(),
_Circle(),
_Circle(),
_Circle(),
_Circle(),
_Circle(),
],
),
),
],
),
);
}
}
class _Circle extends StatelessWidget {
const _Circle({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return SizedOverflowBox(
size: Size(30, 47.3),
child: Column(
children: [
Container(
width: 30.0,
height: 30.0,
decoration: new BoxDecoration(
color: Colors.yellowAccent,
shape: BoxShape.circle,
),
),
SizedBox(height: 4.3,),
Text("example"),
],
),
);
}
}
If there is something wrong with my code, please let me know
This is the result