Flutter如何实现两张图片叠加摆放 并合成带单色图层的目标图片

层叠布局（对标Android FrameLayout） #

Flutter 内置的Stack组件可完全实现FrameLayout的层叠效果，子组件按声明顺序由下到上堆叠，可通过alignment参数设置全局对齐规则，也可嵌套Positioned单独控制单个子组件的位置。
基础代码示例：

Stack(
  // 全局对齐方式，对应FrameLayout的gravity属性
  alignment: Alignment.center,
  children: [
    // 底层元素：原图
    Image.asset(
      "assets/你的原图路径",
      fit: BoxFit.cover,
    ),
    // 上层元素：蓝色蒙层，在原图之上展示
    Positioned.fill(
      child: Container(
        // 可调整透明度控制蒙层深浅
        color: Colors.blue.withOpacity(0.4),
      ),
    )
  ],
)

图片叠加单色效果最优实现 #

如果仅需要给原图叠加蓝色滤镜，不需要在蒙层上额外添加其他元素，推荐使用ColorFiltered组件直接修改图片渲染效果，性能更高：
代码示例：

ColorFiltered(
  colorFilter: ColorFilter.mode(
    // 自定义蓝色和透明度
    Colors.blue.withOpacity(0.4),
    // 可修改BlendMode调整叠加效果，常用的还有BlendMode.color、BlendMode.overlay等
    BlendMode.srcATop,
  ),
  child: Image.asset(
    "assets/你的原图路径",
    fit: BoxFit.cover,
  ),
)

效果调试提示 #

如果最终效果和预期不符，可调整两个参数：

• 蓝色的透明度值：修改withOpacity()的入参，取值范围0~1，数值越大蒙层越深
• 颜色混合模式：修改BlendMode枚举值，不同混合模式会呈现不同的色彩叠加效果

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