为 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});@overrideWidget 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 业务日志采集最佳实践

Kafka 业务日志采集最佳实践

简介 Apache Kafka 是一个分布式流处理平台，主要用于构建实时数据流管道和应用程序。在收集业务日志的场景中，Kafka 可以作为一个消息中间件，用于接收、存储和转发大量的日志数据。将 Kafka 与其他系统（如 Elasticsearch、Flume、…
阅读更多...
Nginx启动后不能正常访问

Nginx启动后不能正常访问

背景介绍 新增NGINX配置文件后，重启nginx无法访问服务。NGINX启动不报错，测试nginx配置文件nginx -t也没问题。 定位问题思路与步骤 查看NGINX配置文件 发现NGINX配置文件中的user是www user www www;查看NGINX相关文件夹的权限 发现有些文件的所…
阅读更多...
docker-compose安装 人大金仓数据库

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证书问题

解决微信小程序电脑能正常使用，手机端无法正常访问的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】智慧物流园区顶层设计方案

本报告首发于公号“管理咨询宝藏”，如需阅读完整版报告内容，请查阅公号“管理咨询宝藏”。 【管理咨询宝藏97】智慧物流园区顶层设计方案 【格式】PDF版本 【关键词】智慧园区、制造型企业转型、数字化转型 【核心观点】 - 中国物流业整体呈现集中度低…
阅读更多...
springboot项目 字典/枚举翻译 终极解决方案 AOP+自定义注解+递归实体字段+实体动态三级缓存+责任链+多种转换方式

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

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

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

文章目录 二叉树 考纲内容 复习提示 1.二叉树的概念 1.1二叉树的定义及其主要特性 1.1.1二叉树的定义 1.1.2几种特殊的二叉树 1.1.3二叉树的性质 1.2二叉树的存储结构 1.2.1顺序存储结构 1.2.2链式存储结构 知识回顾 二叉树 考纲内容 （一）树…
阅读更多...
LeetCode 每日一题 2024/4/29-2024/5/5

LeetCode 每日一题 2024/4/29-2024/5/5

记录了初步解题思路 以及本地实现代码；并不一定为最优 也希望大家能一起探讨 一起进步 目录 4/291146. 快照数组4/30 2798. 满足目标工作时长的员工数目5/1 2462. 雇佣 K 位工人的总代价5/2 857. 雇佣 K 名工人的最低成本5/3 1491. 去掉最低工资和最高工资后的工资平…
阅读更多...
苹果Mac用户下载VS Code（Universal、Intel Chip、Apple Silicon）哪个版本？

苹果Mac用户下载VS Code（Universal、Intel Chip、Apple Silicon）哪个版本？

苹果macOS用户既可以下载通用版（Universal），软件将自动检测用户的处理器并进行适配。 也可以根据型号下载对应CPU的版本： 使用Intel CPU的Mac电脑可下载Intel Chip版本； 使用苹果自研M系列CPU的Mac电脑下载Apple Si…
阅读更多...
Oracle Patch清理

Oracle Patch清理

场景： 在对Oracle安装补丁后，会发现OS上被占用了大量的空间，本文档清理Opatch过程中的一些文件，释放空间 参考文档： Can You Delete $ORACLE_HOME/.patch_storage Directory ? (Doc ID 403218.1) How To Avoid Disk …
阅读更多...
【Redis7】10大数据类型之Hash类型

【Redis7】10大数据类型之Hash类型

文章目录 1.Hash类型2.常用命令3.示例hset和hgethgetallhlenhkeys和hvalshexistshdelhincrby和hincrbyfloathsetnx 1.Hash类型 Redis中的Hash类型是一种高效的数据结构，用于存储键值对的集合。这种类型特别适用于表示对象，因为它允许你将对象的多个属性…
阅读更多...
Context capture/Pix4Dmapper/AutoCAD/CASS/EPS软件的安装流程与使用方法；土方量计算；无人机摄影测量数据处理

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

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

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的简要使用教程

antV X6的简要使用教程

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

【MM32F3270火龙果】点亮led

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

Java中使用FlatBuffers实现序列化

Java 中的 FlatBuffers有助于高速数据序列化/反序列化&#xff0c;消除解析开销。它由 Google 开发&#xff0c;为跨平台数据交换提供无模式、内存高效的解决方案。 Java 开发人员可以利用其直接内存访问来实现最佳性能和最小内存占用&#xff0c;从而提高应用程序速度、可扩展…
阅读更多...
Kamailio openssl 3.0.x 需要注意的事项

Kamailio openssl 3.0.x 需要注意的事项

我们留意到 Debian Bookworm 安装的 openssl 版本是 3.0.x 这里有几个地方要注意&#xff1a; modparam("tls", "init_mode", 1)核心参数 tls_threads_mode 配置为 1 或者 配置为 2版本建议用 v 5.8.1 参考链接&#xff1a; #3832#3765#3791 目前官方…
阅读更多...
北交所佣金费率标准是多少？北交所相关信息科普

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

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

Copyright @ 2022~2023