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

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

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

热门文章

最新文章

  • 1
    Flutter 61: 图解基本 Button 按钮小结 (一)
  • 2
    打通前后端逻辑，客户端Flutter代码一天上线
  • 3
    Flutter新锐专家之路：混合开发篇
  • 4
    Flutter Plugin调用Native APIs
  • 5
    GMTC-闲鱼Flutter实践效果访谈
  • 6
    从零开始，一起学习开发个 Flutter App 吧
  • 7
    如何在 Flutter 中使用 MemoryImage【Flutter 专题 23】
  • 8
    Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
  • 9
    【Flutter】Dart 面向对象 ( get 方法 | set 方法 | 静态方法
  • 10
    flutter外接纹理实现方案
  • 1
    flutter 引用图片资源遇到的问题
    91
  • 2
    移动应用开发的未来：Flutter与Android的深度融合
    81
  • 3
    Flutter 弃用 WillPopScope 使用 PopScope 替代方法
    297
  • 4
    【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
    83
  • 5
    【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
    290
  • 6
    【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
    223
  • 7
    【Flutter前端技术开发专栏】Flutter中的图片加载与缓存优化
    649
  • 8
    【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
    236
  • 9
    【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
    348
  • 10
    【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
    104

    • 相关课程

    更多
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 基于flutter的产品应用实践
  • 《Flutter in action》
  • 闲鱼《Flutter 技术解析与实战》
    • 下一篇
    阿里云oss存储简介和如何使用