Flutter將整個(gè)App變?yōu)榛疑暮?jiǎn)單實(shí)現(xiàn)方法

更新時(shí)間：2021年12月14日 09:03:02 作者：堅(jiān)果前端の博客

Flutter?是?Google?開源的?UI?工具包,幫助開發(fā)者通過一套代碼庫高效構(gòu)建多平臺(tái)精美應(yīng)用,這篇文章主要給大家介紹了關(guān)于Flutter將整個(gè)App變?yōu)榛疑膶?shí)現(xiàn)方法,在Flutter中實(shí)現(xiàn)整個(gè)App變?yōu)榛疑欠浅：?jiǎn)單的,需要的朋友可以參考下

前言

為了讓更多的人永遠(yuǎn)記住12月13日，各大廠都在這一天將應(yīng)用變灰了。

那么接下來我們看一下Flutter是如何實(shí)現(xiàn)的。

Flutter中實(shí)現(xiàn)整個(gè)App變?yōu)榛疑?/h2>
在Flutter中實(shí)現(xiàn)整個(gè)App變?yōu)榛疑欠浅：?jiǎn)單的，

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

ColorFiltered（顏色過濾器）

看名字就知道是增加顏色濾鏡效果的，

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

將上面代碼放到全局根widget下，即可設(shè)置全部頁面顏色變灰

通過colorFilter可設(shè)置某種顏色過濾，比如變灰設(shè)置灰色即可，以及顏色混合模式
ColorFiltered 小部件繼承SingleChildRenderObjectWidget，因此會(huì)提供一個(gè)child子布局，這里可以放置想要過濾顏色的頁面；

最終我們就合成一張這樣帶濾鏡效果

追蹤源碼

我我們持續(xù)追蹤源碼到 RenderImage 類中，可以看到最終也是創(chuàng)建了一個(gè) 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));
  }
}

設(shè)置前

設(shè)置后

功能就這樣實(shí)現(xiàn)了，功能簡(jiǎn)單，意義不凡。

附：ColorFiltered還可以實(shí)現(xiàn)類似“濾鏡”效果，讓一張圖片和color進(jìn)行融合：

Row(

      children: <Widget>[

        Expanded(

          child: Image.asset('images/1.png'),

        ),

        Expanded(

            child: ColorFiltered(

          colorFilter: ColorFilter.mode(Colors.pink[200], BlendMode.modulate),

          child: Image.asset('images/1.png'),

        ))

      ],

    )