Flutter 完成整个App变为灰色（勿忘国殇 警钟长鸣）

前言

1937年12月13日，侵华日军侵入南京，对我同胞实施长达40多天灭绝人性的大屠杀，30万生灵惨遭屠戮，人类文明史上留下最黑暗的一页。81年过去，中华门城墙上战役留下的弹孔仍旧清晰可见，“万人坑”的累累白骨诉说着当年那段悲痛的前史。

昭昭前事，惕惕后人。

为了让更多的人永远记住，各大厂都在这一天将应用变灰了。

Flutter 实现整个App变为灰色（勿忘国殇 警钟长鸣）

那么接下来我们看一下Flutter是怎么完成的。

Flutter中完成整个App变为灰色

在Flutter中完成整个App变为灰色是非常简略的，

只需要在最外层的控件上包裹ColorFiltered，用法如下：

ColorFiltered（色彩过滤器）

看姓名就知道是增加色彩滤镜作用的，

ColorFiltered(
    colorFilter:ColorFilter.mode(Colors.grey, BlendMode.color),
    child: child,
   );

将上面代码放到大局根widget下，即可设置悉数页面色彩变灰

通过colorFilter可设置某种色彩过滤，比如变灰设置灰色即可，以及色彩混合形式 ColorFiltered 小部件承继SingleChildRenderObjectWidget，因此会提供一个child子布局，这里能够放置想要过滤色彩的页面；

最终我们就组成一张这样带滤镜作用

追寻源码

我我们继续追寻源码到 RenderImage 类中，能够看到最终也是创建了一个 ColorFilter 。

class ColorFiltered extends SingleChildRenderObjectWidget {
 /// Creates a widget that applies a [ColorFilter] to its child.
 ///
 /// The [colorFilter] must not be null.
 const ColorFiltered({required this.colorFilter, Widget? child, Key? key})
    : assert(colorFilter != null),
    super(key: key, child: child);
​
 /// The color filter to apply to the child of this widget.
 final ColorFilter colorFilter;
​
 @override
 RenderObject createRenderObject(BuildContext context) => _ColorFilterRenderObject(colorFilter);
​
 @override
 void updateRenderObject(BuildContext context, RenderObject renderObject) {
   (renderObject as _ColorFilterRenderObject).colorFilter = colorFilter;
  }
​
 @override
 void debugFillProperties(DiagnosticPropertiesBuilder properties) {
  super.debugFillProperties(properties);
  properties.add(DiagnosticsProperty<ColorFilter>('colorFilter', colorFilter));
  }
}

设置前

Flutter 实现整个App变为灰色（勿忘国殇 警钟长鸣）

设置后

Flutter 实现整个App变为灰色（勿忘国殇 警钟长鸣）

功能就这样完成了，功能简略，含义非凡，但是前史不会就这样被人忘记。

最后

今日早上十点钟

当空袭警报响彻南京的天空

无论您在哪里

在做什么

请留一分钟

为遇难同胞默哀

国行公祭

不只是民族的悲怆

还有落后必亡的训诫

铭诸心腑

铭记苦难的前史

会聚前行的力量

勿忘国殇 警钟长鸣

振兴中华 吾辈自强