在Flutter中实现整个App变为灰色是非常简单的,只需要在最外层的控件上包裹ColorFiltered,用法如下:

@override
Widget build(BuildContext context) {
return ColorFiltered(
colorFilter: ColorFilter.mode(Colors.grey, BlendMode.color),
child: Scaffold(
appBar: _appBar,
body: IndexedStack(
index: _currIndex,
children: <Widget>[HomeItemPage(), WidgetPage(), MyPage()],
),
backgroundColor: Theme.of(context).backgroundColor,
bottomNavigationBar: _buildBottomNavigationBar(context),
));
}

前后效果对比如下:

交流

如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。

同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。

Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

Flutter 实现整个App变为灰色的更多相关文章

  1. Flutter项目之app升级方案

    题接上篇的文章的项目,还是那个空货管理app.本篇文章用于讲解基于Flutter的app项目的升级方案. 在我接触Flutter之前,做过一个比较失败的基于DCloud的HTML5+技术的app,做过 ...

  2. 两个星期,用Flutter撸个APP

    前言 Flutter是Google推出的跨平台的解决方案,Slogan是"Design beautiful apps",国内也有知名企业在使用和推广,例如阿里.美团都有在尝试. 个 ...

  3. 使用Flutter重构斗鱼APP

    Github源码地址:https://github.com/yukilzw/dy_flutter flutter重构的斗鱼直播APP 首页.娱乐为Material组件开发:直播间.鱼吧为纯自定义编写 ...

  4. 关于keildownload键变为灰色不能使用的问题

    有时候  有些朋友可能会遇到这样的问题 突然间download键变成灰色,导致不能将程序下载到芯片中 遇到中问题如果不是软件卡了  那就是可能一不小心点错了,关掉了下载条件“约定” 可以点“魔术棒” ...

  5. 关于maven工程将model删除重建之后变为灰色的问题的解决

    问题描述: IDEA中的maven工程中有时候将model或者子model建错,删除之后,子模块在maven在侧栏的maven projects中是灰色的,而且是并没有依赖父工程 在网上搜了搜解决办法 ...

  6. iOS 个人账号 iOS APP Development 灰色不可选

    如图,现在的开发者账号是有几个人共用的,已经 生成了一个Development 的证书,我想再申请一个,出现了这样的情况.网上有说的是申请证书个数到了上限,需要删除已经生成的.因为生成的证书其他人需要 ...

  7. Flutter: 监听App显示,隐藏

    关键代码 class _MyAppState extends State<MyApp> with WidgetsBindingObserver { @override void initS ...

  8. 为了弄懂Flutter的状态管理, 我用10种方法改造了counter app

    为了弄懂Flutter的状态管理, 我用10种方法改造了counter app 本文通过改造flutter的counter app, 展示不同的状态管理方法的用法. 可以直接去demo地址看代码: h ...

  9. Flutter & App

    Flutter & App Android & iOS https://flutter.dev/docs/deployment/flavors https://flutter.dev/ ...

随机推荐

  1. shell 获取字符创长度&&识别当前使用的shell&&检查是否为超级用户

    1.获得字符串长度 可以使用下面的方法获得变量值得长度: length=${#value} 例如: [root@gameserver1 shell]# var=12345678 [root@games ...

  2. 数据结构-ST表

    数据结构-ST表 不可修改,在线查询的 RMQ 问题. 其中 \(f[i][j]\) 表示 \(i\sim i+(1<<j)-1\) 这段的 RMQ 值. 时间复杂度 \(O(n\log ...

  3. 第二章、 Vue 起步

    2-2.编写hello world 首先创建vue实例,然后实例接收一些配置项,el表示实例负责管理的区域,data表示区域内的数据 两秒后内容变为bye world 其中app表示实例对象,$dat ...

  4. css 居中方法

    垂直居中 利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的. .ghost-center { po ...

  5. Vue项目二、vue环境搭建以及Vue-cli使用及详解

    一.Vue多页面应用的环境搭建 每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用. 环境的搭建如下,在页面中引入如下框架 <scrip ...

  6. bug的前世今生

    项目上发现的产品bug,若本地有问题,那就是漏测 1.提到产品bug系统 2.需要追踪,要么是漏测,要么是改出来的问题,漏测的需要补充到测试点里 项目上发现的产品bug,若本地没问题,那就是项目上的产 ...

  7. 04-influxdb基本操作

    influxdb基本操作 1. 数据库基本操作 # 创建数据库 > create database db01; # 查看数据库 > show databases; name: databa ...

  8. C语言程序设计(二) C数据类型

    第二章 C数据类型 八进制整数由数字0开头,后跟0~7的数字序列组成. 十六进制整数由数字0加字母x(或X)开头,后跟0~9,a~f(或A~F)的数字序列组成. 整型常量: 默认的int型定义为有符号 ...

  9. 如何在国内离线安装Chrome扩展并科学查资料

    国内离线安装Chrome扩展 这些链接是从知乎国内离线安装 Chrome 扩展程序的方法总结 - 知乎看到的, 怕这个链接失效, 在这里自己备一份: Crx4Chrome - Download CRX ...

  10. vue基础----修饰符,watch,computed,method实例方法

    1.vue常用的修饰符,number,trim,number--->当作数字,trim-->去掉前后空格 2.methods与计算属性 computed 的相同与区别 <body&g ...