Space这个按圈均匀，忽略space被文字占用

Question

我有这个 widge in 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,
          ),
        ),
      ],
    );
  }
}

这会产生这样的布局，很好

现在，我需要在每个圆圈下添加一个标签，但要保持 space 与图像相同，但是当我这样做时，

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

容器的宽度增加，由于space是从容器的中心算起的，所以我得到了这样的东西

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

我尝试使用 Positioned 来包裹标签，但它没有用，因为溢出被隐藏了，而且我无法将文本定位在圆的中心。非常感谢任何帮助。

编辑：

这是使用 Positioned

时的样子

使用以下代码

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

溢出被隐藏了，此外，我不知道如何使文本相对于堆栈（和圆圈）居中

我在想我必须使用 SizedOverflow 框，我看看我能不能弄明白

Answer 1

我是这样解决的

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

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

这是结果

Space这个按圈均匀，忽略space被文字占用

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

widget

flutter

flutter-layout