前言

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

那么接下來我們看一下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;@overrideRenderObject createRenderObject(BuildContext context) => _ColorFilterRenderObject(colorFilter);@overridevoid updateRenderObject(BuildContext context, RenderObject renderObject) {(renderObject as _ColorFilterRenderObject).colorFilter = colorFilter;}@overridevoid debugFillProperties(DiagnosticPropertiesBuilder properties) {super.debugFillProperties(properties);properties.add(DiagnosticsProperty<ColorFilter>('colorFilter', colorFilter));} }

設置前

設置后

功能就這樣實現了，功能簡單，意義不凡。

總結

以上是生活随笔為你收集整理的Flutter中实现整个App变为灰色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。