Flutter自定义TextTheme：如何创建自定义命名的TextStyle变量

Flutter的TextTheme是框架固定类，无法直接添加自定义命名的属性，下面提供两种可行方案实现自定义命名的TextStyle：

方案一：通过Extension扩展TextTheme #

用Dart的扩展特性给TextTheme新增自定义样式，用法简洁直接：

1. 定义TextTheme扩展类

extension TextThemeExtension on TextTheme {
  TextStyle get appBarText => const TextStyle(
        fontSize: 20.0,
        fontWeight: FontWeight.bold,
        color: Colors.white,
      );

  TextStyle get xText => const TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.w500,
        color: Colors.grey,
      );

  TextStyle get myText => const TextStyle(
        fontSize: 16.0,
        color: Colors.black87,
      );
}

2. 在主题中配置（保留原有TextTheme）

// 深色主题
ThemeData darkTheme = ThemeData(
  brightness: Brightness.dark,
  textTheme: const TextTheme(
    displayLarge: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
    displayMedium: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
    bodyLarge: TextStyle(fontSize: 16.0),
  ),
);

// 浅色主题
ThemeData lightTheme = ThemeData(
  brightness: Brightness.light,
  textTheme: const TextTheme(
    displayLarge: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
    displayMedium: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
    bodyLarge: TextStyle(fontSize: 16.0),
  ),
);

3. 在Widget中调用

Text(
  "AppBar标题",
  style: Theme.of(context).textTheme.appBarText,
),
Text(
  "X样式文本",
  style: Theme.of(context).textTheme.xText,
),

方案二：创建独立自定义文本样式类 #

适合需要复杂主题切换、样式过渡的场景，通过ThemeData的extensions注入：

1. 定义自定义样式类

class AppTextStyles extends ThemeExtension<AppTextStyles> {
  final TextStyle appBarText;
  final TextStyle xText;
  final TextStyle myText;

  AppTextStyles({
    required this.appBarText,
    required this.xText,
    required this.myText,
  });

  // 支持样式复制修改
  @override
  AppTextStyles copyWith({
    TextStyle? appBarText,
    TextStyle? xText,
    TextStyle? myText,
  }) {
    return AppTextStyles(
      appBarText: appBarText ?? this.appBarText,
      xText: xText ?? this.xText,
      myText: myText ?? this.myText,
    );
  }

  // 支持主题切换时的动画过渡
  @override
  AppTextStyles lerp(ThemeExtension<AppTextStyles>? other, double t) {
    if (other is! AppTextStyles) return this;
    return AppTextStyles(
      appBarText: TextStyle.lerp(appBarText, other.appBarText, t)!,
      xText: TextStyle.lerp(xText, other.xText, t)!,
      myText: TextStyle.lerp(myText, other.myText, t)!,
    );
  }
}

2. 在主题中注入自定义样式

// 深色主题
ThemeData darkTheme = ThemeData(
  brightness: Brightness.dark,
  textTheme: const TextTheme(
    displayLarge: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
    displayMedium: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
    bodyLarge: TextStyle(fontSize: 16.0),
  ),
  extensions: [
    AppTextStyles(
      appBarText: const TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.white),
      xText: const TextStyle(fontSize: 18.0, fontWeight: FontWeight.w500, color: Colors.grey[300]),
      myText: const TextStyle(fontSize: 16.0, color: Colors.white70),
    ),
  ],
);

// 浅色主题
ThemeData lightTheme = ThemeData(
  brightness: Brightness.light,
  textTheme: const TextTheme(
    displayLarge: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
    displayMedium: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
    bodyLarge: TextStyle(fontSize: 16.0),
  ),
  extensions: [
    AppTextStyles(
      appBarText: const TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.black),
      xText: const TextStyle(fontSize: 18.0, fontWeight: FontWeight.w500, color: Colors.grey[700]),
      myText: const TextStyle(fontSize: 16.0, color: Colors.black87),
    ),
  ],
);

3. 在Widget中调用

Text(
  "自定义样式文本",
  style: Theme.of(context).extension<AppTextStyles>()?.myText,
),

方案对比 #

• 方案一适合快速添加少量自定义样式，调用便捷；
• 方案二更灵活，支持样式过渡、独立管理，适合复杂主题场景。

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