Flutter 修改图片颜色效果与预期不一致，该如何调整修复？

基础信息 #

• 原图：
  
• 预期效果：
  
• 现有实现代码：

Center(
    child: Container(
      height: 181.0,
      width: MediaQuery.of(context).size.width - 46.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0xFFB3E2D6),
            Color(0xFF18A2A5).withOpacity(0.5),
          ],
        ),
      ),
      child: Stack(
        children: [
          Positioned(
            right: -20,
            bottom: 0,
            top: 0,
            child: Image.asset(
              'assets/images/border_background.png',
              width: 220,
              height: 220,
              fit: BoxFit.cover,
            ),
          ),
          Positioned(
            right: -5,
            bottom: 0,
            top: 0,
            child: Image.asset(
              'assets/images/lisa-removebg-preview.png',
              height: 151,
              width: 207,
              fit: BoxFit.cover,
              color: Color(0xFF7CD2CC), colorBlendMode: BlendMode.modulate,
            ),
          )
        ],
      ),
    ),
  ),

问题原因 #

当前使用的BlendMode.modulate混合模式是将图片的每个像素点和指定颜色做乘法运算，会保留原图的过暗/过亮区域，无法实现整体统一覆上青色调同时保留人物明暗层次的效果，导致最终视觉和预期不符。

修复方案 #

1. 替换混合模式：将BlendMode.modulate更换为BlendMode.color，该模式会保留原图的亮度信息，仅替换像素的色相和饱和度，完美适配图片统一染色的需求。
2. 优化滤镜实现：使用ColorFiltered组件包裹图片，替换Image组件自带的color属性配置，后续调整颜色参数更灵活。
3. 对齐整体色调：人物染色的颜色值和背景渐变的中间值匹配，保证卡片整体视觉统一。

修改后完整代码 #

Center(
  child: Container(
    height: 181.0,
    width: MediaQuery.of(context).size.width - 46.0,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20.0),
      gradient: const LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [
          Color(0xFFB3E2D6),
          Color(0x8018A2A5),
        ],
      ),
    ),
    child: Stack(
      children: [
        Positioned(
          right: -20,
          bottom: 0,
          top: 0,
          child: Image.asset(
            'assets/images/border_background.png',
            width: 220,
            height: 220,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          right: -5,
          bottom: 0,
          top: 0,
          child: ColorFiltered(
            colorFilter: const ColorFilter.mode(
              Color(0xFF7CD2CC),
              BlendMode.color,
            ),
            child: Image.asset(
              'assets/images/lisa-removebg-preview.png',
              height: 151,
              width: 207,
              fit: BoxFit.cover,
            ),
          ),
        )
      ],
    ),
  ),
),

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