Flutter中实现整个App变为灰色
2023-09-11 14:20:21 时间
前言
为了让更多的人永远记住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));
}
}
设置前
设置后
功能就这样实现了,功能简单,意义不凡。
相关文章
- Android App集成支付宝
- Flutter: 监听App显示,隐藏
- 安卓逆向5,脱壳实战,模拟器安装使用,Xposed安装使用,fdex2脱壳,app抓包,找到接口参数加密的地方,逆向出来,引力播app
- [APP] Android 开发笔记 003-使用Ant Release 打包与keystore加密说明
- [Flutter] 因为不讲这个重点, 全网 flutter 实战视频沦为二流课程
- ios xcode 怎样模拟app被挂起(在后台被系统杀死) APP 的五种状态
- iOS app store无法提交以供审核 App隐私
- Flutter进阶第5篇: 使用WebView组件flutter_inappbrowser加载远程web页面渲染新闻详情数据
- Error running app: This version of Android Studio is incompatible with the Gradle Plugin used. Try d
- 〖Python APP 自动化测试实战篇⑩〗- app自动化总结与展望
- Flutter之 flutter_after_layout组件的作用:监听页面渲染的第一帧
- Flutter Unable to ‘pub upgrade‘ flutter tool
- 【Android 逆向】获取安装在手机中的应用的 APK 包 ( 进入 adb shell | 获取 root 权限 | 进入 /data/app/ 目录 | 拷贝 base.apk 到外置存储 )
- App自动化测试介绍和环境搭建
- Android:Error:Execution failed for task ‘:app:transformResourcesWithMergeJavaResForDebug‘.
- Flutter 官方自带日期组件 和第三方 日期组件、轮播图 flutter_swiper