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

问题描述

我有这个奇特的东西

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

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

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 _Circle extends StatelessWidget {
  const _Circle({
    Key key,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,Positioned(
          top: 14,child: Text('example')
        )
      ],);
  }
}

隐藏了溢出，此外，我不知道如何相对于Stack（和圆圈）居中文字

我想我必须使用SizedOverflow框，我看看是否可以弄清楚

解决方法

我能够这样解决

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),child:  Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
                _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"),);
  }
}

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

这是结果

flutter-layout widget