Flutter中为LinearPercentIndicator添加边框无效的问题求助

你当前的写法里，Container的边框被LinearPercentIndicator的背景色遮挡了——因为进度条撑满了Container的内部空间，和边框完全贴合，导致看不到边框。以下两种方法可以解决：

方法一：给Container添加内边距（推荐） #

通过给Container设置padding，让进度条和边框之间留出空隙，边框就会显示出来：

Container(
  width: Get.width * 0.8,
  padding: EdgeInsets.all(2), // 添加入边距，数值可根据需求调整
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black),
  ),
  child: LinearPercentIndicator(
    lineHeight: Get.height * 0.04,
    percent: percent / 100,
    backgroundColor: Colors.grey,
    progressColor: AppColors.orangeTextColor,
    center: Text(
      "${percent}%",
      style: TextStyle(
        fontSize: 12.0,
        fontWeight: FontWeight.w600,
        color: Colors.black,
      ),
    ),
  ),
)

方法二：用Stack分层实现 #

如果不需要空隙，想让进度条和边框紧贴，可使用Stack将边框容器和进度条分层，让边框在底层，进度条在上层并缩小尺寸避免遮挡：

Stack(
  alignment: Alignment.center,
  children: [
    // 底层边框容器
    Container(
      width: Get.width * 0.8,
      height: Get.height * 0.04,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black),
      ),
    ),
    // 上层进度条，尺寸略小于边框容器
    LinearPercentIndicator(
      width: Get.width * 0.8 - 4, // 减去边框宽度的2倍（左右各2）
      lineHeight: Get.height * 0.04 - 4, // 上下各留出2的空隙
      percent: percent / 100,
      backgroundColor: Colors.grey,
      progressColor: AppColors.orangeTextColor,
      center: Text(
        "${percent}%",
        style: TextStyle(
          fontSize: 12.0,
          fontWeight: FontWeight.w600,
          color: Colors.black,
        ),
      ),
    ),
  ],
)

内容的提问来源于stack exchange，提问作者Mahnoor Waheed