一、信任咱们对App是非化并不陌生，经常可以看到大厂的App在必定的时分会呈现是非款式如下：
这种效果在原生开发上咱们必定或多或少都了解过，原理都是在根布局绘制的时分将画笔饱和度设置成0；具体完成咱们可以搜一搜这里就不贴了。
二、下面就来说说在Flutter这一侧需要怎样完成
- 原理和原生仍是相同都是将饱和度设置成0，不过在Flutter这完成起来会比在原生愈加的简略。
- Flutter直接为咱们提供了ColorFiltered组件（以Color作为源的混合形式Widget）。
- 只需要将ColorFiltered做为根组件（包裹MaterialApp）即可改变整个应用的色彩形式。
完成的终究代码如下
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;
}
}
- 经过4×5的R、G、B、A、色彩矩阵来生成一个colorFilter
- 终究经过饱和度的值来核算色彩矩阵（饱和度核算算法从Android原生copy过来的）这样就轻松完成了整个App的是非化（不过iOS的webview是不支持的）
