AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

2022-10-29 164
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 如何用一行代码实现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页面
代码Flutter
程序猿在广东
目录
相关文章
明弟有理想
|
1月前
|
存储 开发框架 开发者
flutter:代码存储&基本组件 (五)
本文档介绍了Flutter中的一些基本组件和代码示例，包括代码存储、基本组件如AppBar的简单使用、可滑动切换的标签栏、TextField的多种用法（如简单使用、登录页面、文本控制器的监听与使用、修饰等），以及如何实现点击空白区域隐藏键盘等功能。通过这些示例，开发者可以快速掌握在Flutter应用中实现常见UI元素的方法。
明弟有理想
40 2
zacksleo
|
28天前
|
IDE 调度 开发工具
鸿蒙Flutter实战：08-如何调试代码
本文介绍了鸿蒙Flutter项目的开发环境搭建、配置、日志查看及调试方法。首先按照指南搭建开发环境，安装IDE插件；接着配置vscode的launch.json文件；通过IDE调试控制台或命令行查看日志；提供两种调试Flutter的方式，包括IDE直接运行和使用DevEco；最后介绍ArkTs和Webview的调试方法。
zacksleo
41 0
明弟有理想
|
1月前
|
Dart 开发者
flutter:页面整合 (十)
本文档介绍了如何在 Flutter 应用中使用底部导航栏（`BottomNavigationBar`）和侧边栏（`Drawer`），包括简单的使用方法、属性配置、与按钮结合使用、使用图片作为图标、以及如何实现顶部导航。示例代码展示了如何创建包含多个页面的导航栏，并通过 `TabController` 控制器实现页面切换。同时，文档还提供了如何自定义导航栏样式和添加浮动操作按钮（`FloatingActionButton`）的方法。最后，整合了底部导航栏、侧边栏和顶部导航栏的完整示例代码，帮助开发者快速构建具有导航功能的 Flutter 应用界面。
明弟有理想
30 0
明弟有理想
|
1月前
|
小程序 Java Android开发
flutter:注意点&快速代码&链接虚拟机&改配置 (一)
这段内容主要介绍了Flutter开发中的一些注意事项和快速代码示例。首先，在构建Flutter小程序时，`setState`方法只能在`StatefulWidget`和`State`类中使用，且初始化数据应放在`initState`方法内。接着，通过一个简单的示例展示了如何构建一个包含`Scaffold`的基本Flutter应用，并指出了在`MaterialApp`中移除调试横幅的方法。此外，文档还提供了关于搭建Flutter开发环境、配置虚拟机、解决安装错误以及配置相关文件（如`build.gradle`）的指导信息。
明弟有理想
35 0
旺仔大牛
|
3月前
|
Dart
Flutter之ExpansionTile实现以代码方式码折叠、展开
Flutter之ExpansionTile实现以代码方式码折叠、展开
旺仔大牛
118 4
jcLee95
|
3月前
|
Dart
Flutter笔记：手动配置VSCode中Dart代码自动格式化
Flutter笔记：手动配置VSCode中Dart代码自动格式化
jcLee95
444 5
猫哥ducafecat
|
6月前
|
Dart 安全
简化代码、提高效率：Dart和Flutter开发小技巧
在日常开发中，我们常常会使用一些常用的技巧或语法糖，以简化代码、提高开发效率。本文将分享一些在Dart和Flutter中常用的小贴士，帮助你更轻松地编写优雅高效的代码。
猫哥ducafecat
74 1
简化代码、提高效率：Dart和Flutter开发小技巧
土木林森
|
6月前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter中的平台特定代码实现
【4月更文挑战第30天】Flutter旨在实现跨平台移动应用开发，但有时需针对iOS或Android编写特定代码。平台通道是关键机制，允许Dart代码与原生代码交互。通过`MethodChannel`等实现跨平台通信，然后在iOS和Android上响应调用。条件编译则在编译时决定特定平台代码。本文展示了如何在Flutter中处理平台特定功能，包括示例代码和总结。
土木林森
148 0
【Flutter前端技术开发专栏】Flutter中的平台特定代码实现
土木林森
|
6月前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
【4月更文挑战第30天】本文探讨了如何在Flutter中集成和交互原生代码，以利用特定平台的API和库。当需要访问如蓝牙、特定支付SDK或复杂动画时，集成原生代码能提升效率和性能。集成方法包括：使用Platform Channel进行通信，借助现有Flutter插件，以及Android和iOS的Embedding。文中通过一个电池信息获取的例子展示了如何使用`MethodChannel`在Dart和原生代码间传递调用。这些技术使开发者能充分利用原生功能，加速开发进程。
土木林森
105 0
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
Web3-Basketball
|
前端开发 JavaScript Android开发
React Native 和 Flutter对比，包含代码实例
@[TOC](目录) React Native 和 Flutter 都是流行的跨平台移动应用开发框架。虽然它们在很多方面都有相似之处，但它们也有一些不同之处。在本文中，我们将详细比较这两个框架，讨论它们的优缺点、应用场景、性能以及包含的代码。 # 1. 框架概述 React Native 是由 Facebook 开发的一个开源框架，它允许开发者使用 JavaScript 和 React 来创建原生移动应用。React Native 可以用于开发 iOS、Android 和 Web 应用。它使用 JavaScript 的生态系统和工具，如 Babel、ESLint 和 React 工具链，使得开
Web3-Basketball
183 0