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', colorFilter)); } }
设置前
设置后
功能就这样实现了,功能简单,意义不凡。
附:ColorFiltered还可以实现类似“滤镜”效果,让一张图片和color进行融合:
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'), )) ], )
总结
到此这篇关于Flutter将整个App变为灰色的文章就介绍到这了,更多相关Flutter App变为灰色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
AFURLSessionManager 上传下载使用代码说明
本文通过代码给大家介绍了AFURLSessionManager 上传下载使用说明,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧2017-09-09Android Studio 3.0 原生支持kotlin 例子详解
这篇文章主要介绍了 Android Studio 3.0 原生支持kotlin 例子详解,非常具有实用价值,需要的朋友可以参考下2017-05-05Android开发之资源目录assets与res/raw的区别分析
这篇文章主要介绍了Android开发之资源目录assets与res/raw的区别,结合实例形式分析了Android开发中资源目录assets与res/raw的具体功能、使用方法与区别,需要的朋友可以参考下2016-01-01Android UI设计与开发之实现应用程序只启动一次引导界面
这篇文章主要为大家详细介绍了Android UI设计与开发之实现应用程序只启动一次引导界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-08-08Android视频/音频缓存框架AndroidVideoCache(Okhttp)详解
这篇文章主要为大家详细介绍了Android视频、音频缓存框架AndroidVideoCache,实现边下边播功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2018-07-07
最新评论