Flutter 根据圆圈均匀隔开，忽略文本占用的空间

我有一个发抖的寡妇

我使用进度条是因为最终会有进度，这就是一个例子

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,
          ),
        ),
      ],
    );
  }
}

容器的宽度增加了，因为空间是从容器的中心开始计算的，所以我得到了如下结果

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"),
        ],
      ),
    );
  }
}

我需要像第一张图片一样放置圆圈，圆圈下的标签居中，但不作为容器宽度的一部分

我试图使用定位来包装标签，但它没有工作，因为溢出是隐藏的，而且我也无法将文本定位在圆圈的中心。非常感谢您的帮助

编辑：

这是使用“定位”时的外观

使用以下代码

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')
        )
      ],
    );
  }
}

溢出是隐藏的，而且，我不知道如何使文本相对于堆栈（和圆圈）居中

---

我想我必须使用SizeOverflow box，我会看看我是否能解决它

我能这样解决它

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"),
        ],
      ),
    );
  }
}

类MyWidget扩展了无状态Widget{
constmywidget（{Key}）：super（Key:Key）；
最终双集装箱宽度=510；
@凌驾
小部件构建（构建上下文）{
返回容器(
身高：30，
对齐：对齐.center，
宽度：集装箱宽度，
填充：仅限边缘设置（顶部：12.0），
子：堆栈(
//mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
线性预测指示器(
值：0，
背景颜色：Colors.yellowAccent，
身高:3,，
valueColor:new AlwaysStoppedAnimation（颜色.黄色调），
),
容器(
//颜色：颜色。红色调。带Alpha（100），
宽度：集装箱宽度，
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
_圆（），
_圆（），
_圆（），
_圆（），
_圆（），
_圆（），
],
),
),
],
),
);
}
}
类_{
常量圆（{Key}）：超级（Key:Key）；
@凌驾
小部件构建（构建上下文）{
返回尺寸溢流箱(
尺寸：尺寸（30,47.3），
子：列(
儿童：[
容器(
宽度：30.0，
身高：30.0，
装饰：新盒子装饰(
颜色：Colors.yellowAccent，
形状：BoxShape.circle，
),
),
尺寸箱（高度：4.3，），
文本（“示例”），
],
),
);
}
}

如果我的代码有问题，请告诉我

这就是结果