Flutter中如何为PNG图加滤镜适配明暗模式，仅转黑色线条为白色？

你遇到的问题核心是需要针对性替换黑色线条颜色，同时保留彩色线条和透明背景，之前的BlendMode参数无法做到精准的颜色筛选，所以会出现丢失彩色或异常背景的问题。

实现思路 #

通过Stack叠加两个图层，底层保留原图的彩色线条，顶层仅将原图中的黑色线条转为白色并叠加，最终实现暗模式下的需求：

1. 底层：直接显示原图，保留所有彩色线条和透明背景。
2. 顶层：通过颜色矩阵提取原图中的黑色线条（将非黑色区域转为透明），再将提取出的黑色线条转为白色，其他区域保持透明。

代码实现 #

import 'package:flutter/material.dart';

Widget adaptiveChartImage(String imageUrl, BuildContext context) {
  bool isDarkMode = MediaQuery.of(context).platformBrightness == Brightness.dark;

  if (isDarkMode) {
    return Stack(
      fit: StackFit.expand,
      children: [
        // 底层：原图保留彩色线条
        Image.network(imageUrl),
        // 顶层：仅显示白色的黑色线条
        ColorFiltered(
          // 将提取出的黑色线条转为白色
          colorFilter: ColorFilter.mode(Colors.white, BlendMode.srcIn),
          child: ColorFiltered(
            // 颜色矩阵：仅保留黑色线条，非黑色区域转为透明
            colorFilter: ColorFilter.matrix([
              1, 0, 0, 0, 0,  // R通道不变
              0, 1, 0, 0, 0,  // G通道不变
              0, 0, 1, 0, 0,  // B通道不变
              -1, -1, -1, 0, 1, // Alpha通道：仅黑色(R=G=B=0)时A=1，其他情况A=0
            ]),
            child: Image.network(imageUrl),
          ),
        ),
      ],
    );
  } else {
    // 亮模式直接显示原图
    return Image.network(imageUrl);
  }
}

为什么之前的方法无效 #

• color: Colors.white, colorBlendMode: BlendMode.color：该模式会将原图的色相、饱和度与白色混合，直接覆盖彩色线条的颜色，同时可能破坏透明背景，导致白色背景出现。
• color: Colors.black, colorBlendMode: BlendMode.difference：该模式会反转所有颜色（包括彩色线条），将黑色转为白色的同时，彩色线条会变成对应的补色，不符合保留原彩色的需求。

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