一叁执、相信大家對App黑白化并不陌生，經(jīng)嘲可以看到大廠的App在一定的時候會呈現(xiàn)黑白樣式如下：
這種效果在原生開發(fā)上大家肯定或多或少都了解過谈宛，原理都是在根布局繪制的時候?qū)嫻P飽和度設(shè)置成0；具體實現(xiàn)大家可以搜一搜這里就不貼了胎署。
二吆录、下面就來說說在Flutter這一側(cè)需要怎么實現(xiàn)
- 原理和原生還是一樣都是將飽和度設(shè)置成0，不過在Flutter這實現(xiàn)起來會比在原生更加的簡單琼牧。
- Flutter直接為我們提供了ColorFiltered組件（以Color作為源的混合模式Widget）恢筝。
- 只需要將ColorFiltered做為根組件（包裹MaterialApp）即可改變整個應(yīng)用的顏色模式。
實現(xiàn)的最終代碼如下
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<double> 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<double> _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過來的）這樣就輕松實現(xiàn)了整個App的黑白化（不過iOS的webview是不支持的）
三恢氯、最后來看下實現(xiàn)的效果
作者：阿鐘
鏈接：https://juejin.cn/post/7172022347262590984
來源：稀土掘金
