Flutter中AppBar标题颜色无法随主题变更问题求助

核心问题排查 #

你的代码存在两个关键问题：

1. ThemeData定义时的引用错误：构建TextTheme时使用了theme.primaryColor，此时theme对象尚未完成初始化，导致文本样式绑定的是旧主题值，而非当前创建的主题色。
2. 主题实例获取不实时：如果theme变量是提前缓存的全局实例，而非在build方法中通过Theme.of(context)获取的实时主题，主题切换后该变量不会自动更新，导致标题颜色无法同步变化。

分步解决方案 #

1. 修正ThemeData的定义 #

将TextTheme中所有theme.primaryColor替换为当前ThemeData的primaryColor属性，确保样式绑定正确的主题色：

ThemeData(
  primaryColor: const Color(0xFF009688),
  primaryColorDark: const Color(0xFF00796B),
  primaryColorLight: const Color(0xFFB2DFDB),
  textTheme: TextTheme(
    titleLarge: TextStyle(
      fontSize: 16.sp,
      color: primaryColor, // 直接引用当前ThemeData的primaryColor
      fontFamily: 'OpenSans',
    ),
    titleMedium: TextStyle(
      fontSize: 14.sp,
      color: primaryColor,
      fontFamily: 'OpenSans',
    ),
    titleSmall: TextStyle(
      fontSize: 12.sp,
      color: primaryColor,
      fontFamily: 'OpenSans',
    ),
    bodyLarge: TextStyle(
        fontSize: 14.sp, fontFamily: 'OpenSans', color: primaryColor),
    bodyMedium: TextStyle(
        fontSize: 12.sp, fontFamily: 'OpenSans', color: primaryColor),
    bodySmall: TextStyle(
        fontSize: 8.sp, fontFamily: 'OpenSans', color: primaryColor),
  ))

额外推荐：使用Flutter官方推荐的ColorScheme管理主题颜色，减少样式冲突且更易维护：

ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xFF009688),
    primary: const Color(0xFF009688),
  ),
  textTheme: TextTheme(
    titleMedium: TextStyle(
      fontSize: 14.sp,
      color: colorScheme.primary, // 绑定ColorScheme的primary色
      fontFamily: 'OpenSans',
    ),
    // 其他样式同理替换
  ),
)

2. 确保AppBar获取实时主题实例 #

在Widget的build方法中，通过Theme.of(context)获取当前最新的主题，而非缓存的theme变量：

AppBar(
  backgroundColor: Colors.white,
  title: Row(
    children: [
      IconButton(
          color: Theme.of(context).primaryColor,
          onPressed: () {},
          icon: const Icon(Icons.arrow_back_ios_new)),
      SizedBox(
        width: 2.w,
      ),
      Text(
        'The Title',
        // 使用实时主题的primaryColor
        style: TextStyle(color: Theme.of(context).primaryColor),
      )
    ],
  ))

3. 验证主题切换逻辑 #

确保主题切换时，通过setState更新MaterialApp的theme属性，触发全局组件重建：

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late ThemeData _currentTheme;

  @override
  void initState() {
    super.initState();
    _currentTheme = lightTheme; // 初始浅色主题
  }

  void _switchTheme() {
    setState(() {
      _currentTheme = _currentTheme == lightTheme ? darkTheme : lightTheme;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _currentTheme,
      home: Scaffold(
        appBar: AppBar(/* 你的AppBar代码 */),
        body: ElevatedButton(
          onPressed: _switchTheme,
          child: const Text('切换主题'),
        ),
      ),
    );
  }
}

// 定义你的亮色/暗色主题
final lightTheme = ThemeData(/* 亮色主题配置 */);
final darkTheme = ThemeData(/* 暗色主题配置 */);

测试验证 #

完成上述修改后，切换主题时：

• AppBar内的标题文本颜色会同步跟随primaryColor变化
• 其他组件的主题色也会保持正常同步

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