为您的 Flutter 应用设置主题：ThemeData 和 ColorScheme 指南
共 9943字，需浏览 20分钟
·
2024-05-06 18:11
在媒体和其他来源中有许多关于这个主题的文章，那么这篇文章的必要性是什么？
在本文中，我计划仅关注 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});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
themeMode: ThemeMode.light, //or ThemeMode.dark
theme: GlobalThemData.lightThemeData,
darkTheme: GlobalThemData.darkThemeData,
home: const ShowCaseHome(),
);
}
}
这将为您的应用程序提供默认的浅色主题，您可以将模式更改为深色。您可以探索 InheritedWidget 或 Provider 的强大功能，以实现动态切换。这不在本文的讨论范围之内，如有需要，我们可以在今后的文章中详细讨论。
希望您能得到一些有价值的信息，感谢您的阅读🤗。