为 Flutter 应用设置主题:ThemeData 和 ColorScheme 指南

在媒体和其他来源中有许多关于这个主题的文章,那么这篇文章的必要性是什么?

在本文中,我计划仅关注 ThemeData 小部件的关键点以及我的开发经验中最常用的参数,并且您将获得有关每个参数如何对您的应用程序执行操作的简要说明。

你好奇吗?继续阅读🤗。

使用 ThemeData 的主要好处

  • 保持统一的外观: 定义一个单一的 ThemeData 对象,该对象封装了应用程序的调色板、字体、形状和其他视觉元素。在所有屏幕上一致应用该主题,确保品牌识别的一致性和可识别性。
  • 为不同的主题设计不同的版本: 为浅色和深色模式、应用分区或用户首选项定义多个 ThemeData 对象。
  • 只需定义一次主题,即可在任何地方使用它们: 无需手动设置单个小组件的视觉样式,而是在应用中应用适当的 ThemeData 小组件。这减少了代码重复并简化了维护。
  • 集中控制和更新:ThemeData 对象进行更改,这些更改会自动传播到整个应用,从而确保一致性并减少重复编辑的需要。
  • 创建无障碍变体: 为有特定无障碍需求的用户建立单独的主题数据对象,例如为视觉障碍用户建立高对比度主题。

现在你已经熟悉了 ThemeData 对你的帮助,那么如何在你的应用程序中实现它呢?😊

这是一个在 Flutter 应用程序中实现深色和浅色主题的基本主题的小指南。

创建全局类

第一步是创建一个全局类,用于在应用程序中管理 ThemeData。该类包含一个方法,用于使用 ColorSheme 创建不同的 ThemeData 实例。

class GlobalThemData {static ThemeData themeData(ColorScheme colorScheme, Color focusColor) {return ThemeData(colorScheme: colorScheme, focusColor: focusColor);}
}

focusColor : 该颜色用于 TextFields 和 TextFormField 等 widget,以指示该 widget 是否有主焦点。

ColorSheme :基于 Material 规范的一组 30 种颜色,可用于配置大多数组件的颜色属性。

我们可以在本文后面更详细地讨论 ColorSheme

现在,我们可以创建更多可直接从 GlobalThemData 类访问的公有变量。

lightColorScheme:持有浅色主题的 ColorSheme

darkColorScheme:持有暗色主题的 ColorSheme

lightThemeData:持有浅色主题的 ThemeData

darkThemeData:持有深色主题的 ThemeData

class GlobalThemData {static final Color _lightFocusColor = Colors.black.withOpacity(0.12);static final Color _darkFocusColor = Colors.white.withOpacity(0.12);static ThemeData lightThemeData = themeData(lightColorScheme, _lightFocusColor);static ThemeData darkThemeData = themeData(darkColorScheme, _darkFocusColor);static ThemeData themeData(ColorScheme colorScheme, Color focusColor) {return ThemeData(colorScheme: colorScheme, focusColor: focusColor);}static const ColorScheme lightColorScheme = ColorScheme();static const ColorScheme darkColorScheme = ColorScheme();
}

如果您和我一起编码,您可能会在 ColorSheme() 上收到必需的参数错误警告。

我们可以在下一步中解决这个问题。

ColorSheme

ColorSheme 中的颜色是成对的;第一个是颜色本身,第二个是可用于该颜色的颜色,如文本和其他元素。

这 10 种颜色对于为 Flutter ThemData 创建 ColorSheme 是必需的,每种颜色的值都是可选的。

  • primary:这是应用程序中最常用的颜色
  • onPrimary:此颜色用于为原色之上的元素(例如文本、图标等)着色。
  • secondary:这定义了一种辅助颜色,通常用于不太显眼的元素,如滤镜芯片、切换按钮或背景元素,这些元素需要从主色中脱颖而出,但又不能喧宾夺主。
  • onSecondary:该颜色用于为次要颜色上的元素着色。
  • error:这是用于错误消息或警报的颜色,例如闪烁的红灯表示问题。
  • onError:这是与 error 颜色相得益彰的文本颜色,例如红色标志上的白色文本,便于阅读。
  • background:整个应用程序的主要背景色。将其视为放置所有其他 UI 元素的画布。
  • onBackground:该颜色用于为背景色上的元素着色。
  • surface:用作卡片、工作表、对话框等高级 UI 元素的基色。

因此,我们可以按如下方式设置我们的 lightColorScheme and darkColorScheme 变量。

static const ColorScheme lightColorScheme = ColorScheme(primary: Color(0xFFB93C5D),onPrimary: Colors.black,secondary: Color(0xFFEFF3F3),onSecondary: Color(0xFF322942),error: Colors.redAccent,onError: Colors.white,background: Color(0xFFE6EBEB),onBackground: Colors.white,surface: Color(0xFFFAFBFB),onSurface: Color(0xFF241E30),brightness: Brightness.light,);
static const ColorScheme darkColorScheme = ColorScheme(primary: Color(0xFFFF8383),secondary: Color(0xFF4D1F7C),background: Color(0xFF241E30),surface: Color(0xFF1F1929),onBackground: Color(0x0DFFFFFF),error: Colors.redAccent,onError: Colors.white,onPrimary: Colors.white,onSecondary: Colors.white,onSurface: Colors.white,brightness: Brightness.dark,);

现在,我们为浅色和深色主题设置了一个 ColorScheme,那么如何在主题数据中使用它呢?

创建 ThemeData

我们需要修改 GlobalThemeData 中的 themeData 方法,为 ThemeData 创建一个合适的值 ColourScheme,并传递给它。

static ThemeData themeData(ColorScheme colorScheme, Color focusColor) {return ThemeData(colorScheme: colorScheme,canvasColor: colorScheme.background,scaffoldBackgroundColor: colorScheme.background,highlightColor: Colors.transparent,focusColor: focusColor);}
  • canvasColor: 这是整个屏幕或应用程序窗口的背景色。它定义了所有其他 UI 元素的基色。
  • scaffoldBackgroundColor: 这具体定义了脚手架本身的背景颜色,包括应用栏、正文内容区域和底部导航栏(如果存在)。
  • highlightColor: 该属性定义了用户点击并按住 Widget 时短暂显示的颜色。它为用户提供了交互已注册的视觉反馈。
  • focusColor:该属性定义了用于直观显示当前哪个元素具有焦点的颜色,这意味着该元素将接收键盘输入。这对于突出显示当前活动元素,吸引用户注意非常有用。

这些只是示例,还有许多其他选项 ThemeData 可供您探索。

因此,我们最终的 GlobalThemeData 类应该是这样的:

class GlobalThemData {static final Color _lightFocusColor = Colors.black.withOpacity(0.12);static final Color _darkFocusColor = Colors.white.withOpacity(0.12);static ThemeData lightThemeData =themeData(lightColorScheme, _lightFocusColor);static ThemeData darkThemeData = themeData(darkColorScheme, _darkFocusColor);static ThemeData themeData(ColorScheme colorScheme, Color focusColor) {return ThemeData(colorScheme: colorScheme,canvasColor: colorScheme.background,scaffoldBackgroundColor: colorScheme.background,highlightColor: Colors.transparent,focusColor: focusColor);}static const ColorScheme lightColorScheme = ColorScheme(primary: Color(0xFFB93C5D),onPrimary: Colors.black,secondary: Color(0xFFEFF3F3),onSecondary: Color(0xFF322942),error: Colors.redAccent,onError: Colors.white,background: Color(0xFFE6EBEB),onBackground: Colors.white,surface: Color(0xFFFAFBFB),onSurface: Color(0xFF241E30),brightness: Brightness.light,);static const ColorScheme darkColorScheme = ColorScheme(primary: Color(0xFFFF8383),secondary: Color(0xFF4D1F7C),background: Color(0xFF241E30),surface: Color(0xFF1F1929),onBackground: Color(0x0DFFFFFF),error: Colors.redAccent,onError: Colors.white,onPrimary: Colors.white,onSecondary: Colors.white,onSurface: Colors.white,brightness: Brightness.dark,);
}

是的!我们刚刚为我们的应用程序创建了一个漂亮的主题。现在怎么办?

设置 ThemeData

MaterialApp 中设置所需的主题。

class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,title: 'Flutter Demo',themeMode: ThemeMode.light, //or ThemeMode.darktheme: GlobalThemData.lightThemeData,darkTheme: GlobalThemData.darkThemeData,home: const ShowCaseHome(),);}
}

这将为您的应用程序提供默认的浅色主题,您可以将模式更改为深色。您可以探索 InheritedWidget 或 Provider 的强大功能,以实现动态切换。这不在本文的讨论范围之内,如有需要,我们可以在今后的文章中详细讨论。

希望您能得到一些有价值的信息,感谢您的阅读🤗。


https://medium.com/@nikhithsunil/theme-your-flutter-app-a-guide-to-themedata-and-colorscheme-d8bca920a6b5

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/8718.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分类任务的基础学习

1.什么是分类? 2.局限性: 当样本量逐渐变大的时候,准确率会下降——>因为线性回归曲线距离我们的原点越远,预测就会开始不准确,因为 x前面的倍数就会越来越小,这就导致了样本量变大,但是那些…

Kafka 业务日志采集最佳实践

简介 Apache Kafka 是一个分布式流处理平台,主要用于构建实时数据流管道和应用程序。在收集业务日志的场景中,Kafka 可以作为一个消息中间件,用于接收、存储和转发大量的日志数据。将 Kafka 与其他系统(如 Elasticsearch、Flume、…

docker-compose安装 人大金仓数据库

下载官网安装包 将安装包重命名为: kingbase.tar 再导入镜像仓库 docker load -i kingbase.tar目录创建data文件夹创建docker-compose文件 version: 3 services: kingbase: image: kingbase:v1 container_name: kingbaseports: - "54321:54321" volumes: -…

解决微信小程序电脑能正常使用,手机端无法正常访问的SSL证书问题

目录 前言1 问题描述与调试2 探索问题根源2.1 用户反馈收集2.2 尝试手机端访问2.3 PC端调试 3 确认问题与解决方案3.1 检查SSL证书3.2 重新部署SSL证书3.3 测试修复效果 4 SSL(Secure Sockets Layer)证书中间证书4.1 SSL证书链的构成4.2 中间证书的作用 …

【管理咨询宝藏97】智慧物流园区顶层设计方案

本报告首发于公号“管理咨询宝藏”,如需阅读完整版报告内容,请查阅公号“管理咨询宝藏”。 【管理咨询宝藏97】智慧物流园区顶层设计方案 【格式】PDF版本 【关键词】智慧园区、制造型企业转型、数字化转型 【核心观点】 - 中国物流业整体呈现集中度低…

springboot项目 字典/枚举翻译 终极解决方案 AOP+自定义注解+递归实体字段+实体动态三级缓存+责任链+多种转换方式

目录 前言实现思路技术确定 食用方式效果使用样例项目中使用第一步 复制包第二步 实现LoadDictDatabase并将其注入容器第三步 标识需要翻译的字段第四步 标识需要翻译的方法第五步 调用需要翻译的方法 实现细节TODO 前言 字典,即在存储介质中进行存储时,为了避免业务上对其名称…

数据结构复习指导之二叉树的概念

文章目录 二叉树 考纲内容 复习提示 1.二叉树的概念 1.1二叉树的定义及其主要特性 1.1.1二叉树的定义 1.1.2几种特殊的二叉树 1.1.3二叉树的性质 1.2二叉树的存储结构 1.2.1顺序存储结构 1.2.2链式存储结构 知识回顾 二叉树 考纲内容 (一)树…

苹果Mac用户下载VS Code(Universal、Intel Chip、Apple Silicon)哪个版本?

苹果macOS用户既可以下载通用版(Universal),软件将自动检测用户的处理器并进行适配。 也可以根据型号下载对应CPU的版本: 使用Intel CPU的Mac电脑可下载Intel Chip版本; 使用苹果自研M系列CPU的Mac电脑下载Apple Si…

Context capture/Pix4Dmapper/AutoCAD/CASS/EPS软件的安装流程与使用方法;土方量计算;无人机摄影测量数据处理

目录 专题一 无人机摄影测量技术应用现状及其发展 专题二 基本原理和关键技术讲解 专题三 无人机影像外业数据获取 专题四 数据处理环境建立与软件熟悉 专题五 GNSS数据土方量计算 专题六 基于无人机影像数据的正射影像制作 专题七 基于无人机影像数据的三维模型制作 专…

gocator导出图片

想用3D扫描后的图片,但是系统自带的导出方法很麻烦,所以考虑通过sdk导出 首先需要设置点云亮度 这里是导出图片的关键代码 case GoDataMessageType.SurfaceIntensity: { Debug.WriteLine("SurfaceIntensity "); GoSu…

线段树专题

落谷1607 #include<bits/stdc.h> using namespace std;#define ls u<<1 #define rs u<<1|1const int N 1e5;int n, k, c, ans; struct line {int l, r, m; // m为候车的牛的数量bool operator<(line b) {return r < b.r;} }s[N];struct tree {int l, …

antV X6的简要使用教程

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 在我们的日常开发工作中&#xff0c;我们经常需要构建复杂的交互式图…

【MM32F3270火龙果】点亮led

文章目录 前言GPIO的工作模式一、有哪些工作模式&#xff1f;1.1 GPIO的详细介绍1.2 GPIO的内部框图输入模式输出部分 二、操作GPIO点亮led2.1 初始化gpio2.2 写gpio 三、示例代码总结 前言 本文将介绍如何在MM32F3270火龙果微控制器上使用Keil开发环境点亮LED。MM32F3270火龙…

北交所佣金费率标准是多少?北交所相关信息科普

北交所的佣金费率并非固定不变&#xff0c;而是可以根据投资者的需求和证券公司的政策进行调整。目前北交所的佣金费率最低是万分之二。 一般来说&#xff0c;北交所的佣金费率默认在万分之三左右&#xff0c;但这不是固定的费率。根据证券公司的不同&#xff0c;佣金费率可以…

绝地求生:PCL第五轮数据出炉,XDD与林树入选最佳阵容,韦神真在做事了

距离PCL季后赛开赛还有两天时间&#xff0c;小梦还沉浸在常规赛最后一场WCG和TSG争名额的关键之战&#xff0c;现在看来WCG硬贴PeRo房区那波真是没道理&#xff0c;只能解释为太想拿分导致上头了&#xff0c;导致决赛圈没有余力限制TSG&#xff0c;但这何尝不是TSG自己的剧本&a…

【JavaEE初阶系列】——利用Servlet API实现表白墙网站(1.6w字深刻了解前后端交互逻辑)

目录 &#x1f393;准备工作 &#x1f393;了解前端部分知识(主要JS&#xff09; &#x1f393;前后端交互部分 &#x1f388;主要思路 &#x1f6a9;提交信息 &#x1f36d;让前端发起一个ajax请求 &#x1f36d;服务器读取上述请求&#xff0c;并计算出响应 &#x1…

【Stylus详解与引入】

文章目录 Stylus详解与引入一、Stylus简介二、Stylus的特性1. 变量2. 嵌套规则3. 混合&#xff08;Mixins&#xff09;4. 函数5. 条件语句和循环 三、Stylus的引入与配置1. 安装Stylus和stylus-loader2. 配置Webpack3. 在Vue项目中使用Stylus4. 编译Stylus代码四、Stylus的性能…

2024-05-08 问AI: 在深度学习中,介绍一下RMSProp 优化器

文心一言 在深度学习中&#xff0c;RMSProp&#xff08;Root Mean Square Propagation&#xff09;优化器是一种常用的优化算法&#xff0c;主要用于神经网络训练的梯度下降算法的变体。它是对Adagrad优化器的一种改进&#xff0c;旨在解决Adagrad中学习率过快下降的问题。 R…

RAC GCS_SERVER_PROCESSES参数

参考文档&#xff1a; GCS_SERVER_PROCESSES (oracle.com) 在awr报告中&#xff0c;看到addm建议如下&#xff1a; 其中有Global Cache Messaging和 Global Cache Congestion Activity During the Analysis Period ----------------------------------- Total database tim…

Linux的编译器

程序编译的过程 程序的编译过程是将源代码转换为可执行文件的一系列步骤。这个过程涉及多个阶段&#xff0c;主要包括预处理、编译、汇编和链接。下面详细介绍每个阶段&#xff1a; 1. 预处理&#xff08;Preprocessing&#xff09; 在实际编译之前&#xff0c;源代码文件首…