Flutter中如何创建与图片尺寸匹配的图片遮罩层？

问题出在你的Stack直接占满了父Container的尺寸，而Image使用BoxFit.contain时只会在Stack内居中显示（保持自身比例），导致Positioned.fill的遮罩层覆盖了整个Container，而非仅图片区域。

只需将Stack用Center包裹，让Stack根据图片的实际显示尺寸自适应布局，就能让遮罩层完全匹配图片大小：

Container(
  width: double.infinity,
  height: double.infinity,
  color: Colors.red,
  child: Center(
    child: Stack(
      children: [
        Image.memory(
          snapshot.data!,
          fit: BoxFit.contain,
        ),
        Positioned.fill(
          child: Container(
            color: Colors.grey.withOpacity(0.5),
          ),
        ),
      ],
    ),
  ),
)

原理：Center会让子元素（Stack）按照自身内容的尺寸布局，Stack的大小会被Image的实际显示尺寸约束，此时Positioned.fill就会完全覆盖Image区域，而不是整个父Container。

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