Flutter 實現整個App變為灰色（勿忘國殤 警鐘長鳴）

Flutter 實現整個App變為灰色（勿忘國殤 警鐘長鳴）

前言

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)); } }

設定前

設定後

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

最後

今天早上十點鐘

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

無論您在哪裡

在做什麼

請留一分鐘

為遇難同胞默哀

國行公祭

不只是民族的悲愴

還有落後必亡的訓誡

銘諸心腑

銘記苦難的歷史

匯聚前行的力量

勿忘國殤 警鐘長鳴

振興中華 吾輩自強