如何用一行代码实现Flutter页面变灰效果?

简介: 如何用一行代码实现Flutter页面变灰效果?

使用flutter widget小部件ColorFiltered

ColorFiltered(
      colorFilter:ColorFilter.mode(Colors.grey, BlendMode.color),
      child: child,
    );

将上面代码放到全局根widget下,即可设置全部页面颜色变灰

  • 通过colorFilter可设置某种颜色过滤,比如变灰设置灰色即可,以及颜色混合模式
  • ColorFiltered 小部件继承SingleChildRenderObjectWidget,因此会提供一个child子布局,这里可以放置想要过滤颜色的页面;

效果演示

image.png

GitHub项目地址:https://github.com/ChessLuo/flutter_study_app

相关文章
|
容器
Flutter 108: 图解 PageView 滑动页面预览小尝试
0 基础学习 Flutter,第一百零八步:学习一下 PageView 的基本应用!
1150 1
|
3月前
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
54 0
|
10月前
|
UED 索引
Flutter仿写微信导航栏快速实现页面导航
Flutter仿写微信导航栏快速实现页面导航
|
存储 数据安全/隐私保护
Flutter App页面路由及路由拦截实现
直接使用页面跳转会带来诸多缺陷,通过路由管理可以降低页面耦合,提高代码的可维护性和权限控制。本篇介绍了 Flutter 的路由管理和拦截实现。
1137 1
Flutter App页面路由及路由拦截实现
|
JSON 数据格式 容器
Flutter 仿微信价值几个亿的页面
网传微信支付页面的第三方链接一个格子需要广告费1一个亿,微信支付页非常适合做功能导航,本篇使用 ListView和 GridView 模仿微信支付页面
222 0
Flutter 仿微信价值几个亿的页面
|
存储 索引 容器
Flutter 构建常用的 App 页面框架
详细讲解如何用 Flutter 构建一个底部导航的 App 页面框架
423 0
Flutter  构建常用的 App 页面框架
Flutter 跳转并关闭当前页面
Flutter 跳转并关闭当前页面
1438 0
|
Java Android开发 iOS开发
Flutter 跳转页面并传值
Flutter 跳转页面并传值
328 0
Flutter 跳转页面并传值
Flutter入门:如何只关闭自身页面
前几天QA给我提了一个bug,说一个弹窗总是无缘无故的自己退出,而且没有任何规律,无法准确复现。 我经过调查发现,我们有一个倒计时弹窗(在Flutter中弹窗其实也是页面),倒计时结束后关闭。但是在弹出倒计时后,由于一些业务逻辑又弹出另外一个弹窗,这时候如果倒计时结束调用pop,只会将新的弹窗关闭,而倒计时弹窗则无法关闭了。 因为这个弹窗不是必弹的,所以导致好像后一个页面是随机无故退出似的。
588 0