嘿，我之前也遇到过一模一样的问题！这种淡淡的黑影其实是Flutter渲染抗锯齿机制导致的小瑕疵——当两个带圆角的容器叠加，且上层容器的边框颜色和下层容器背景色一致时，抗锯齿算法产生的半透明过渡像素会和下层颜色混合，就出现了这种看起来没贴合的“假边框”。

给你几个亲测有效的解决方法，你可以根据自己的布局需求选：

• 方法一：关闭上层容器的抗锯齿
  在小容器的BoxDecoration里添加isAntiAlias: false，直接跳过抗锯齿渲染，就能消除黑影：

  Container(
    padding: const EdgeInsets.all(4),
    decoration: BoxDecoration(
      color: const Color.fromARGB(255, 67, 83, 114),
      border: Border.all(color: Colors.white, width: 2),
      borderRadius: BorderRadius.circular(13),
      isAntiAlias: false, // 新增该行
    ),
    child: Text(
      duration,
      style: const TextStyle(color: Colors.white, fontSize: 13),
    ),
  ),
  

  小缺点是边缘可能会有一点点锯齿感，但如果圆角半径不大，基本肉眼察觉不到。

• 方法二：用ClipRRect裁剪上层容器
  把小容器用ClipRRect包裹，设置和容器一致的圆角，裁剪掉边缘的过渡像素：

  ClipRRect(
    borderRadius: BorderRadius.circular(13),
    child: Container(
      padding: const EdgeInsets.all(4),
      decoration: BoxDecoration(
        color: const Color.fromARGB(255, 67, 83, 114),
        border: Border.all(color: Colors.white, width: 2),
        borderRadius: BorderRadius.circular(13),
      ),
      child: Text(
        duration,
        style: const TextStyle(color: Colors.white, fontSize: 13),
      ),
    ),
  ),
  

• 方法三：微调上层容器的位置
  给上层容器加一点点偏移，让它稍微覆盖下层容器一点，抵消抗锯齿的阴影效果：

  // 假设你用Positioned定位小容器
  Positioned(
    top: -0.5,
    left: -0.5,
    child: Container(
      padding: const EdgeInsets.all(4),
      decoration: BoxDecoration(
        color: const Color.fromARGB(255, 67, 83, 114),
        border: Border.all(color: Colors.white, width: 2),
        borderRadius: BorderRadius.circular(13),
      ),
      child: Text(
        duration,
        style: const TextStyle(color: Colors.white, fontSize: 13),
      ),
    ),
  ),
  

  这个需要根据你的实际布局微调偏移数值，0.5-1像素左右就够了。

备注：内容来源于stack exchange，提问作者David Harry