Flutter App開發黑白化UI實現方案ColorFiltered

語言: CN / TW / HK

一、相信大家對App黑白化並不陌生,經常可以看到大廠的App在一定的時候會呈現黑白樣式如下:

這種效果在原生開發上大家肯定或多或少都瞭解過,原理都是在根佈局繪製的時候將畫筆飽和度設定成0;具體實現大家可以搜一搜這裡就不貼了。

二、下面就來說說在Flutter這一側需要怎麼實現

  • 原理和原生還是一樣都是將飽和度設定成0,不過在Flutter這實現起來會比在原生更加的簡單。
  • Flutter直接為我們提供了ColorFiltered元件(以Color作為源的混合模式Widget)。
  • 只需要將ColorFiltered做為根元件(包裹MaterialApp)即可改變整個應用的顏色模式。

實現的最終程式碼如下

```java class SaturationWidget extends StatelessWidget { final Widget child;

///value [0,1] final double saturation;

const SaturationWidget({ required this.child, this.saturation = 0, Key? key, }) : super(key: key);

@override Widget build(BuildContext context) { return ColorFiltered( colorFilter: ColorFilter.matrix(_saturation(saturation)), child: child, ); }

///Default matrix List get _matrix => [ 1, 0, 0, 0, 0, //R 0, 1, 0, 0, 0, //G 0, 0, 1, 0, 0, //B 0, 0, 0, 1, 0, //A ];

///Generate a matrix of specified saturation ///[sat] A value of 0 maps the color to gray-scale. 1 is identity. List _saturation(double sat) { final m = _matrix; final double invSat = 1 - sat; final double R = 0.213 * invSat; final double G = 0.715 * invSat; final double B = 0.072 * invSat; m[0] = R + sat; m[1] = G; m[2] = B; m[5] = R; m[6] = G + sat; m[7] = B; m[10] = R; m[11] = G; m[12] = B + sat; return m; } } ``` - 通過4x5的R、G、B、A、顏色矩陣來生成一個colorFilter - 最終通過飽和度的值來計算顏色矩陣(飽和度計算演算法從Android原生copy過來的)這樣就輕鬆實現了整個App的黑白化(不過iOS的webview是不支援的)

三、最後來看下實現的效果