Flutter 如何在百分比指示器中添加带有进度文本的矩形框

我想在LinearPercentIndicator顶部添加一个百分比文本（请参见图片）。我正在使用插件

我在堆栈中添加了加载指示器，并使用

LayoutBuilder

包装了整个小部件，这将为您提供当前小部件的BoxConstraints。您可以使用它来计算百分比指示器的位置，并在其上方放置一个小部件（文本）

类MyProgressIndicator扩展了无状态小部件{
常数MyProgressIndicator({
关键点，
})：super（key:key）；
@凌驾
小部件构建（构建上下文）{
百分之二=0.5；
返回布局生成器(
生成器：（上下文、约束）{
返回容器(
子：堆栈(
fit:StackFit.expand，
溢出：溢出。可见，
儿童：[
定位(
top:0，//您可以通过负片调整此值以提升您的子窗口小部件
左：（constraints.maxWidth*percent）-（50/2），//子宽度/2（用于获取小部件的中心），
儿童：中心(
子：容器(
宽度：50，
对齐：alignment.topCenter，
子项：文本（“${percent*100}%”），
),
),
),
定位(
排名：0，
右:0,，
左:0,，
底部：0，
子项：LinearPercenticator(
填充：EdgeInsets.zero，
线高：15，
宽度：constraints.maxWidth，
背景颜色：Colors.black，
百分比:百分比,，
颜色：颜色。黄色，
),
),
],
),
);
},
);
}
}

经过一番努力，我找到了解决方案

class LinearProgressWithTextWidget extends StatelessWidget {
  final Color color;
  final double progress;
  LinearProgressWithTextWidget({Key key,@required this.color, @required this.progress}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    double totalWidth = ((MediaQuery.of(context).size.width/2)-padding);
    return Container(
      child: Column(
        children: [
          Transform.translate(
            offset: Offset((totalWidth * 2 * progress) - totalWidth, -5),
            child: Container(
              padding: EdgeInsets.only(left: 4, right: 4, top: 4, bottom: 4),

              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(2.0),
                color: color,
              ),
              child: Text(
                "${progress * 100}%",
                style: TextStyle(
                    fontSize: 12.0,
                    fontFamily: 'Kanit-Medium',
                    color: Colors.white,
                    height: 0.8
                ),
              ),
            ),
          ),
          LinearPercentIndicator(
            padding: EdgeInsets.zero,
            lineHeight: 15,
            backgroundColor: HexColor("#F8F8F8"),
            percent: progress,
            progressColor: color,

          ),
        ],
      )
    );
  }
}

---

谢谢你的回答。但是我如何在进度的末尾定位文本（参见图片）。谢谢。但当我将其放入列表视图时，我面临错误。请确保为其指定了定义的高度，例如，将容器包装在高度为60的

LayoutBuilder

周围。由于没有约束，

StackFit.expand

将溢出并给出错误