Flutter中实现整个App变为灰色

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

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));
  }
}

设置前

image.png

设置后

image.png

功能就这样实现了,功能简单,意义不凡。

相关文章
|
5月前
|
JSON Dart 安全
Flutter App混淆加固、保护与优化原理
Flutter App混淆加固、保护与优化原理
104 0
|
2月前
|
开发工具 iOS开发
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
120 2
|
2月前
|
JSON 自然语言处理 Android开发
Flutter本地化(国际化)之App名称
Flutter本地化(国际化)之App名称
54 1
|
4月前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
5月前
|
人工智能 自然语言处理 API
我用 Flutter Gemini 写了一个水贴 APP
本文通过 Flutter 插件 google_generative_ai 快速的集成了 google ai gemini 来实现一个水贴的工具。
我用 Flutter Gemini 写了一个水贴 APP
|
Dart IDE 开发工具
【腾讯云 Cloud Studio 实战训练营】尝鲜体验Flutter编写一个App应用
欢迎参加腾讯云 Cloud Studio 实战训练营!在本次训练营中,我们将通过App项目入口说明,基本文件说明,基础框架搭建,带您一步步编写一个基于 Flutter 的静态App系统。无论您是初学者还是有一定编程经验的开发者,本训练营都将为您提供一个深入了解和掌握 Flutter 技术以及App开发的机会。 使用 Flutter作为UI框架,我们将能够充分利用其强大的功能和优势,快速搭建一个高效、可扩展的App系统。Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。
【腾讯云 Cloud Studio 实战训练营】尝鲜体验Flutter编写一个App应用
|
5月前
|
存储 前端开发 Go
flutter+go构建的即时通讯app,ChatCraft
社交应用程序在世界各地都很流行,例如 Facebook、Line、Whatsapp。如果您渴望打造一款独具个性的社交平台,Chat-Craft项目将是您不可或缺的理想之选。Chat-Craft是一款跨平台移动应用,采用了Golang作为后端服务端技术,以及Flutter作为前端客户端技术。该应用旨在提供高效、稳定且跨平台的用户体验,将现代的移动应用开发技术和高性能的后端服务端技术相结合。在Chat-Craft项目中,作者精心雕琢了客户端UI,灵感汲取于各大即时通讯应用及最新的应用设计规范。
|
5月前
|
存储 容器
Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库
Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库
249 0
|
10月前
|
JSON Dart 安全
Flutter App混淆加固、保护与优化原理
在移动应用程序开发中,保护应用程序的代码和数据安全至关重要。本文将探讨如何对Flutter应用程序进行混淆、优化和保护,以提高应用程序的安全性和隐私。
|
Dart 前端开发 JavaScript
掌握这个关键技术,让你的APP开发事半功倍!——Flutter与其他方案的区别
掌握这个关键技术,让你的APP开发事半功倍!——Flutter与其他方案的区别
78 0