Flutter明暗主题切换时自定义TextTheme样式不生效求助

问题简述 #

• 自定义明暗主题的TextTheme后，使用style: Theme.of(context).textTheme.headline5时，切换到暗黑模式文本仍保持黑色，无法随主题适配；
• 不指定style时文本颜色能正常切换，但无法统一管控应用内的字体和字号。

核心原因 #

直接新建TextTheme实例并手动指定固定颜色，覆盖了Flutter系统默认的主题颜色适配逻辑；同时ThemeData配置未正确关联系统颜色方案，导致主题切换时文本样式未同步更新。

解决方案 #

步骤1：重构自定义TextTheme，基于系统主题扩展 #

修改text_theme.dart，不再手动创建全新的TextTheme，而是基于系统默认的light/dark主题TextTheme进行扩展，保留自动颜色适配逻辑，仅替换字体、字号等自定义属性：

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class TTextTheme {
  static TextTheme lightTextTheme(BuildContext context) {
    return ThemeData.light().textTheme.copyWith(
          subtitle1: GoogleFonts.openSans(
            fontWeight: FontWeight.bold,
            fontSize: 13.0,
          ),
          bodyText1: GoogleFonts.montserrat(
            fontWeight: FontWeight.normal,
            fontSize: 16.0,
          ),
          bodyText2: GoogleFonts.montserrat(
            fontWeight: FontWeight.bold,
            fontSize: 13.0,
          ),
          headline6: const TextStyle(fontSize: 30),
          headline1: GoogleFonts.openSans(
            fontWeight: FontWeight.bold,
            fontSize: 16.0,
          ),
          headline2: GoogleFonts.openSans(
            color: Colors.blue[900],
            fontWeight: FontWeight.bold,
            fontSize: 13.0,
          ),
          headline3: GoogleFonts.montserrat(
            fontWeight: FontWeight.normal,
            fontSize: 16.0,
          ),
          headline5: GoogleFonts.montserrat(
            fontWeight: FontWeight.normal,
            fontSize: 16.0,
          ),
        );
  }

  static TextTheme darkTextTheme(BuildContext context) {
    return ThemeData.dark().textTheme.copyWith(
          subtitle1: GoogleFonts.openSans(
            fontWeight: FontWeight.bold,
            fontSize: 13.0,
          ),
          bodyText1: GoogleFonts.montserrat(
            fontWeight: FontWeight.normal,
            fontSize: 16.0,
          ),
          bodyText2: GoogleFonts.montserrat(
            fontWeight: FontWeight.bold,
            fontSize: 13.0,
          ),
          headline6: const TextStyle(fontSize: 30),
          headline1: GoogleFonts.openSans(
            fontWeight: FontWeight.bold,
            fontSize: 16.0,
          ),
          headline2: GoogleFonts.openSans(
            color: Colors.blue[900],
            fontWeight: FontWeight.bold,
            fontSize: 13.0,
          ),
          headline3: GoogleFonts.montserrat(
            fontWeight: FontWeight.normal,
            fontSize: 16.0,
          ),
          headline4: GoogleFonts.montserrat(
            fontWeight: FontWeight.normal,
            fontSize: 16.0,
            decoration: TextDecoration.lineThrough,
            decorationThickness: 2.85,
            fontStyle: FontStyle.italic,
          ),
          headline5: GoogleFonts.montserrat(
            fontWeight: FontWeight.normal,
            fontSize: 16.0,
          ),
        );
  }
}

注：仅保留特殊需求的固定颜色（如headline2的蓝色），其余文本颜色由系统自动根据主题亮度适配。

步骤2：修正ThemeData配置 #

修改theme_provider.dart中的MyThemes，确保主题配置关联系统颜色方案，并传递上下文给自定义TextTheme：

import 'package:flutter/material.dart';
import 'package:my_gtd_20220804/theme/text_theme.dart';

class ThemeProvider extends ChangeNotifier {
  ThemeMode themeMode = ThemeMode.system;
  bool get isDarkMode => themeMode == ThemeMode.dark;

  void toggleTheme(bool isOn) {
    themeMode = isOn ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

class MyThemes {
  static ThemeData lightTheme(BuildContext context) {
    return ThemeData(
      primarySwatch: Colors.blue,
      brightness: Brightness.light,
      dividerColor: Colors.grey[300],
      scaffoldBackgroundColor: Colors.white,
      iconTheme: const IconThemeData(color: Colors.white),
      textTheme: TTextTheme.lightTextTheme(context),
      backgroundColor: Colors.white,
      bottomAppBarColor: Colors.white,
    );
  }

  static ThemeData darkTheme(BuildContext context) {
    return ThemeData(
      primarySwatch: Colors.grey,
      brightness: Brightness.dark,
      dividerColor: Colors.grey[300],
      scaffoldBackgroundColor: Colors.black,
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.grey,
        brightness: Brightness.dark,
      ),
      iconTheme: const IconThemeData(color: Colors.white),
      textTheme: TTextTheme.darkTextTheme(context),
      backgroundColor: Colors.black,
      bottomAppBarColor: Colors.black,
    );
  }
}

注：暗黑主题使用ColorScheme.fromSeed确保颜色方案一致性，避免手动配置冲突。

步骤3：更新MaterialApp配置 #

修改Main中的代码，传递上下文给主题方法：

return MaterialApp(
  themeMode: themeProvider.themeMode,
  theme: MyThemes.lightTheme(context),
  darkTheme: MyThemes.darkTheme(context),
  // 其他配置项...
);

特殊文本颜色处理 #

如果需要某些文本跟随主题的自定义颜色，可使用系统颜色方案属性，例如：

headline2: GoogleFonts.openSans(
  color: Theme.of(context).colorScheme.primary,
  fontWeight: FontWeight.bold,
  fontSize: 13.0,
),

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