Flutter：如何为同一文本主题样式设置多种颜色？

我正在为应用制作文本样式主题，从Flutter官方文档中获取了以下示例代码：

MaterialApp(
  title: appName,
  theme: ThemeData(
    // Define the default brightness and colors.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],

    // Define the default font family.
    fontFamily: 'Georgia',

    // Define the default `TextTheme`. Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: const TextTheme(
      displayLarge: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      titleLarge: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyMedium: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  ),
  home: const MyHomePage(
    title: appName,
  ),
);

以及：

Container(
  color: Theme.of(context).colorScheme.secondary,
  child: Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.titleLarge,
  ),
),

我希望为同一文本尺寸设置多种颜色，例如让titleLarge样式可呈现红色或白色。但TextTheme的TextStyle仅能设置一种颜色，请问能否在Text组件中后续修改颜色？或有没有办法覆盖Theme.of(context).textTheme.titleLarge的颜色？

完全可以在Text组件中覆盖主题样式的颜色，下面是两种常用的实现方式：

1. 用copyWith直接修改颜色 #

利用TextStyle的copyWith方法，保留主题中titleLarge的原有样式（字号、字体样式等），仅替换颜色属性：

Text(
  '红色的titleLarge文本',
  style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.red),
),
Text(
  '白色的titleLarge文本',
  style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.white),
),

注意加上?做空安全判断，避免主题样式为null时触发异常。

2. 结合主题颜色体系扩展 #

如果想让颜色跟随应用的亮色/暗色模式联动，可以在ThemeData的colorScheme中定义自定义颜色，再通过copyWith应用：

// 定义主题时扩展colorScheme
theme: ThemeData(
  colorScheme: ColorScheme.fromSwatch()
    ..copyWith(
      titleRed: Colors.red,
      titleWhite: Colors.white,
    ),
  // 其他主题配置...
)

// 使用时调用
Text(
  '联动主题的红色标题',
  style: Theme.of(context).textTheme.titleLarge?.copyWith(
    color: Theme.of(context).colorScheme.titleRed,
  ),
),

优化技巧：封装常用样式 #

如果需要频繁使用特定颜色的titleLarge，可以封装成扩展类减少重复代码：

extension TextThemeExtensions on TextTheme {
  TextStyle? get titleLargeRed => titleLarge?.copyWith(color: Colors.red);
  TextStyle? get titleLargeWhite => titleLarge?.copyWith(color: Colors.white);
}

// 使用时直接调用
style: Theme.of(context).textTheme.titleLargeRed,

内容的提问来源于stack exchange，提问作者Shafly Hamzah