Flutter将整个App变为灰色的方法是什么

这篇文章主要介绍"Flutter将整个App变为灰色的方法是什么"，在日常操作中，相信很多人在Flutter将整个App变为灰色的方法是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"Flutter将整个App变为灰色的方法是什么"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

前言

为了让更多的人永远记住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;  @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));  }}

设置前

设置后

功能就这样实现了，功能简单，意义不凡。

附：ColorFiltered还可以实现类似"滤镜"效果，让一张图片和color进行融合：

Row(      children: [        Expanded(          child: Image.asset('images/1.png'),        ),        Expanded(            child: ColorFiltered(          colorFilter: ColorFilter.mode(Colors.pink[200], BlendMode.modulate),          child: Image.asset('images/1.png'),        ))      ],    )

到此，关于"Flutter将整个App变为灰色的方法是什么"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！