Flutter切换明暗主题时ListTile自定义文本样式不更新

我在Flutter页面中使用包含ListTile的ListView，已在MaterialApp中定义明暗两种主题，并通过ThemeBloc的状态切换themeMode：

MaterialApp(
  theme: AppTheme.light,
  darkTheme: AppTheme.dark,
  themeMode: context.watch<ThemeBloc>().state,
),

但切换主题时，ListTile的trailing文本组件颜色未发生变化，我的ListTile代码如下：

ListTile(
  leadingAndTrailingTextStyle : Theme.of(context).textTheme.labelMedium,
  title: Text(state.data.elementAt(index).stockName),
  trailing: Text("My text which should change color based on theme"),
),

labelMedium在明暗主题中配置了不同颜色：

static ThemeData light = ThemeData(
  useMaterial3: true,
  colorScheme: lightColorScheme,
  brightness: Brightness.light,
  fontFamily: GoogleFonts.montserrat().fontFamily,
  textTheme: TextTheme(
    labelMedium: TextStyle(
      color: lightColorScheme.onPrimaryContainer,
      fontSize: 16,
      fontWeight: FontWeight.w500,
    ),
  ),
);
static ThemeData dark = ThemeData(
  useMaterial3: true,
  colorScheme: darkColorScheme,
  brightness: Brightness.dark,
  fontFamily: GoogleFonts.montserrat().fontFamily,
  textTheme: TextTheme(
    labelMedium: TextStyle(
      color: darkColorScheme.onPrimaryContainer,
      fontSize: 16,
      fontWeight: FontWeight.w500,
    ),
  ),
);

补充说明：通过AppBar中的开关触发ThemeBloc事件切换明暗主题，若不设置自定义文本样式，ListTile文本颜色会正常从黑变白；但设置自定义样式后，切换主题时颜色不更新，仅在跳转至其他页面再返回后才会变化，直接给Text组件设置同款样式也无效。

问题原因 #

直接通过Theme.of(context)获取样式并赋值时，Widget没有监听主题的变化，导致主题切换时无法触发Widget重建，样式也就不会更新。另外在Material3中，直接绑定硬编码颜色的TextStyle，无法响应主题的动态切换。

解决方案 #

方案1：用AnimatedBuilder监听主题变化 #

通过AnimatedBuilder绑定Theme作为动画源，确保主题变化时重建Text组件：

ListTile(
  leadingAndTrailingTextStyle: Theme.of(context).textTheme.labelMedium,
  title: Text(state.data.elementAt(index).stockName),
  trailing: AnimatedBuilder(
    animation: Theme.of(context),
    builder: (context, child) {
      return Text(
        "My text which should change color based on theme",
        style: Theme.of(context).textTheme.labelMedium,
      );
    },
  ),
)

方案2：通过Consumer绑定ThemeBloc状态 #

如果使用Bloc，可以用Consumer<ThemeBloc>包裹ListTile，确保主题状态变化时重建整个ListTile：

Consumer<ThemeBloc>(
  builder: (context, state, child) {
    return ListTile(
      leadingAndTrailingTextStyle: Theme.of(context).textTheme.labelMedium,
      title: Text(state.data.elementAt(index).stockName),
      trailing: Text(
        "My text which should change color based on theme",
        style: Theme.of(context).textTheme.labelMedium,
      ),
    );
  },
)

方案3：绑定ColorScheme动态颜色（推荐） #

修改主题配置，去掉TextStyle中硬编码的颜色，改为在使用时绑定当前主题的ColorScheme：

// 修改主题配置
static ThemeData light = ThemeData(
  useMaterial3: true,
  colorScheme: lightColorScheme,
  brightness: Brightness.light,
  fontFamily: GoogleFonts.montserrat().fontFamily,
  textTheme: TextTheme(
    labelMedium: TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.w500,
    ),
  ),
);
static ThemeData dark = ThemeData(
  useMaterial3: true,
  colorScheme: darkColorScheme,
  brightness: Brightness.dark,
  fontFamily: GoogleFonts.montserrat().fontFamily,
  textTheme: TextTheme(
    labelMedium: TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.w500,
    ),
  ),
);

// 使用时动态绑定颜色
ListTile(
  leadingAndTrailingTextStyle: Theme.of(context).textTheme.labelMedium?.copyWith(
    color: Theme.of(context).colorScheme.onPrimaryContainer,
  ),
  title: Text(state.data.elementAt(index).stockName),
  trailing: Text(
    "My text which should change color based on theme",
    style: Theme.of(context).textTheme.labelMedium?.copyWith(
      color: Theme.of(context).colorScheme.onPrimaryContainer,
    ),
  ),
)

这种方式完全遵循Material3的设计逻辑，颜色会随主题自动切换，无需额外监听，是最稳定的解决方案。

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