Flutter中为嵌套Container应用ColorFiltered出现全屏滤镜异常

问题根源 #

你遇到的问题是因为Align组件默认会让子组件填充自身可用空间，ColorFiltered继承这个约束后，尺寸会和外层蓝色Container完全一致。滤镜会作用于ColorFiltered的整个绘制区域（包括透明部分），外层Container的蓝色背景透过透明区域显示时也会被滤镜处理，同时ColorFiltered的扩展导致外层Container看起来被拉伸。

三种可行解决方案 #

方案一：用Center替代Align

Center组件会让子组件保持自身尺寸，仅负责居中布局，这样ColorFiltered只会覆盖内层红色Container的范围，滤镜不会影响外层蓝色区域：

class Test1 extends StatelessWidget {
  const Test1({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 300,
      width: MediaQuery.of(context).size.width,
      child: Center(
        child: ColorFiltered(
          colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.saturation),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

方案二：给Align设置widthFactor和heightFactor

通过这两个参数限制Align的尺寸与子组件一致，避免ColorFiltered扩展到外层Container的大小：

class Test1 extends StatelessWidget {
  const Test1({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 300,
      width: MediaQuery.of(context).size.width,
      child: Align(
        widthFactor: 1,
        heightFactor: 1,
        child: ColorFiltered(
          colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.saturation),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

方案三：给ColorFiltered包裹SizedBox

直接限制ColorFiltered的尺寸和内层Container相同，从根源上避免它扩展：

class Test1 extends StatelessWidget {
  const Test1({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 300,
      width: MediaQuery.of(context).size.width,
      child: Align(
        child: SizedBox(
          width: 100,
          height: 100,
          child: ColorFiltered(
            colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.saturation),
            child: Container(
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}

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