#yyds幹貨盤點#Flutter 實作整個App變為灰色（勿忘國殇 警鐘長鳴）【Flutter專題37】

前言

1937年12月13日，侵華日軍侵入南京，對我同胞實施長達40多天滅絕人性的大屠殺，30萬生靈慘遭殺戮，人類文明史上留下最黑暗的一頁。81年過去，中華門城牆上戰争留下的彈孔依舊清晰可見，“萬人坑”的累累白骨訴說着當年那段沉痛的曆史。 昭昭前事，惕惕後人。

為了讓更多的人永遠記住，各大廠都在這一天将應用變灰了。

那麼接下來我們看一下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));
  }      

設定前

設定後

功能就這樣實作了，功能簡單，意義不凡，但是曆史不會就這樣被人遺忘。

最後

今天早上十點鐘

當空襲警報響徹南京的天空

無論您在哪裡

在做什麼

請留一分鐘

為遇難同胞默哀

國行公祭

不隻是民族的悲怆

還有落後必亡的訓誡

銘諸心腑

銘記苦難的曆史

彙聚前行的力量

勿忘國殇 警鐘長鳴