为您的 Flutter 应用程序设置主题：ThemeData 和 ColorScheme

在深入研究之前，我需要告诉你一些事情。在媒体和其他来源中有许多关于这个主题的文章，那么这篇文章的必要性是什么？

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

你好奇吗？继续阅读 🤗 。

使用  ThemeData  的主要好处

保持统一的外观和感觉：定义一个  ThemeData  对象，该对象封装应用的调色板、字体、形状和其他视觉元素。在所有屏幕上一致地应用此主题，确保具有凝聚力和可识别的品牌标识。

• 为不同的主题创建变体：为浅色和深色模式、应用部分或用户偏好设置定义多个 ThemeData 对象。
• 定义一次主题，并在任何地方使用它们：无需手动为单个小部件设置视觉样式，而是在应用中应用适当的  ThemeData  样式。这样可以减少代码重复并简化维护。
• 集中控制和更新：对  ThemeData  对象进行更改，这些更改会自动传播到整个应用中，从而确保一致性并减少重复编辑的需要。
• 创建可访问的变体：为具有特定辅助功能需求的用户构建单独的  ThemeData  对象，例如为视障用户构建高对比度主题。创建可访问的变体：为具有特定辅助功能需求的用户构建单独的  ThemeData  对象，例如为视障用户构建高对比度主题。

那么，现在您已经熟悉 了 ThemeData  它如何帮助您，那么如何在您的应用程序中实现它？请跟我😊在一起。

这是一个小指南，介绍如何在 Flutter 应用中为深色和浅色主题实现基本主题。

创建全局类

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

focusColor  ：TextFields 和 TextFormField 等小部件使用此颜色来指示小部件具有主要焦点。

ColorSheme ：一组基于材料规格的 30 种颜色，可用于配置大多数组件的颜色属性。

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

现在，我们可以创建可以直接从  GlobalThemData  类访问的其他公共变量。

• lightColorScheme：包含浅色主题的  ColorSheme 。
• darkColorScheme：包含用于深色主题的  ColorSheme 。
• lightThemeData：保存浅色主题的  ThemeData 。
• darkThemeData：保存深色主题的  ThemeData 。

如果你和我一起编码，你可能应该在  ColorSheme（）  上收到一个必需的参数错误警告。

我们可以在下一步中修复此问题。

ColorSheme

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

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

• primary  ：这是应用程序中最常用的颜色
• onPrimary  ：此颜色用于为原色之上的元素着色，例如文本、图标等。
• secondary  ：这定义了次要颜色，通常用于不太突出的元素，如滤镜芯片、切换按钮或背景元素，这些元素需要从主要颜色中脱颖而出，但又不能压倒它。
• onSecondary  ：此颜色用于为辅助颜色顶部的元素着色。
• error  ：这是用于错误消息或警报的颜色，例如闪烁的红灯表示问题。
• onError  ：这是与 错误 颜色相配的文本颜色，例如红色符号上的白色文本，以便于阅读。
• background  ：整个应用程序的主要背景色。可以将其视为放置所有其他 UI 元素的画布。
• onBackground  ：此颜色用于在背景颜色之上为元素着色。
• surface ：用作提升的 UI 元素（如卡片、工作表、对话框等）的基色。
• onSurface ：用于在表面颜色之上为元素着色。

因此，我们可以按照如下方式设置  lightColorScheme  和  darkColorScheme  变量。

因此，到目前为止，我们为浅色和深色主题设置了  ColorScheme ，现在我们如何在  ThemeData  中使用它？

创建 ThemeData

我们需要在  GlobalThemeData  中修改我们的  themeData  方法，以使用将传递给它的适当值  ColourScheme  构建  ThemeData 。

• canvasColor ：这是整个屏幕或应用窗口的背景颜色。它定义了放置所有其他 UI 元素的基色。
• scaffoldBackgroundColor ：这专门定义基架本身的背景颜色，包括应用栏、正文内容区域和底部导航栏（如果存在）。
• highlightColor ：此属性定义当用户点击并按住小组件时短暂显示的颜色。它向用户提供视觉反馈，表明交互已注册。
• focusColor ：此属性定义用于直观地指示当前具有焦点的元素的颜色，这意味着它是将接收键盘输入的元素。这对于突出显示当前活动的元素，将用户的注意力吸引到它上面非常有用。

这些只是示例，您需要探索  ThemeData  上的大量其他选项。

因此，我们最终的  GlobalThemeData  类应如下所示：

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

设置 ThemeData

在  MaterialApp  中设置所需的主题。

这将为您的应用程序提供默认的浅色主题，您可以将模式更改为深色。您可以探索 InheritedWidget 或 Provider 用于动态切换的强大功能。这超出了本文的范围，如果需要，我们可以在以后的文章中详细讨论。