Flutter中如何用ColorFiltered给图片一半区域添加颜色？

ColorFiltered组件会对其整个子Widget应用颜色滤镜，无法直接指定作用区域。要实现仅对图片一半区域添加滤镜的效果，你可以通过Stack叠加原图与裁剪后的带滤镜图片来实现，具体代码如下：

Stack(
  children: [
    // 底层显示原图
    Image.asset("assets/bar.png"),
    // 上层显示带滤镜的半区域图片
    ClipRect(
      child: Align(
        // 控制滤镜区域：topCenter对应上半部分，centerLeft对应左半部分
        alignment: Alignment.topCenter,
        // heightFactor=0.0~1.0，0.5表示只保留上半部分；如果是左右区域，改用widthFactor:0.5
        heightFactor: 0.5,
        child: ColorFiltered(
          colorFilter: const ColorFilter.matrix([
            0.0, 0.0, 0.0, 0.0, 0.0,
            2.0, 0.0, 0.0, 0.0, 0.0,
            0.0, 0.0, 3.0, 0.0, 0.0,
            0.0, 0.0, 0.0, 1.0, 0.0,
          ]),
          child: Image.asset("assets/bar.png"),
        ),
      ),
    ),
  ],
)

关键说明： #

• ClipRect + Align组合用来裁剪出图片的一半区域：heightFactor:0.5保留垂直方向上半部分，widthFactor:0.5保留水平方向左半部分，通过alignment可以切换上下/左右区域。
• 你原本的ColorFilter.matrix参数本身是有效的，只是之前没有限制作用范围，现在通过裁剪实现了仅半区域应用滤镜的效果。

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