如何在管理ThemeMode时避免Riverpod的ConsumerWidget重复重建

• MaterialApp builder频繁触发更新：MaterialApp的builder方法会在多种场景下被调用（主题切换、窗口尺寸变化、系统字体调整等），每次调用都会通过Theme.of(context)获取新的ThemeData并重新覆盖themeProvider，导致依赖该Provider的组件（如HomeScreen）随builder的每一次调用重建，产生大量不必要的重建。
• 双重监听放大重建次数：HomeScreen同时监听themeProvider和themeModeStateProvider，两者的变化都会触发组件重建。而themeProvider因builder频繁调用产生的多次更新，进一步放大了重建次数。

方案一：直接从ThemeMode派生ThemeData（推荐） #

既然已经明确了亮/暗主题的实现，完全可以通过当前的ThemeMode直接生成对应的ThemeData，无需依赖Theme.of(context)，从根源上避免builder调用带来的额外更新。

1. 修改themeProvider的实现：

final themeProvider = Provider<ThemeData>((ref) {
  final themeMode = ref.watch(themeModeStateProvider);
  // 根据当前ThemeMode返回对应主题
  return themeMode == ThemeMode.light
      ? FlexThemeData.light(scheme: FlexScheme.mandyRed)
      : FlexThemeData.dark(scheme: FlexScheme.mandyRed);
});

2. 移除MaterialApp中的builder配置：

class MainApp extends ConsumerWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final ThemeMode themeMode = ref.watch(themeModeStateProvider);

    if (kDebugMode) {
      print("building app");
    }

    return MaterialApp(
      theme: FlexThemeData.light(scheme: FlexScheme.mandyRed),
      darkTheme: FlexThemeData.dark(scheme: FlexScheme.mandyRed),
      themeMode: themeMode,
      home: const HomeScreen(),
    );
  }
}

这样themeProvider只会在ThemeMode变化时更新一次，HomeScreen也只会在主题切换时重建一次，彻底解决过度重建问题。

方案二：缓存ThemeData（适用于必须依赖Theme.of(context)的场景） #

如果需要处理系统主题动态变化等必须依赖Theme.of(context)的场景，可以通过缓存ThemeData，仅当主题真正变化时才更新themeProvider：

1. 添加用于缓存主题的StateProvider：

final cachedThemeProvider = StateProvider<ThemeData?>((ref) => null);

2. 修改MaterialApp的builder逻辑：

builder: (context, child) {
  final currentTheme = Theme.of(context);
  final cachedTheme = ref.watch(cachedThemeProvider);
  
  // 仅当主题真正变化时更新缓存
  if (cachedTheme != currentTheme) {
    ref.read(cachedThemeProvider.notifier).state = currentTheme;
  }

  return ProviderScope(
    overrides: [
      themeProvider.overrideWithValue(currentTheme),
    ],
    child: child!,
  );
},

额外优化：精准监听主题属性 #

在HomeScreen中，如果只需要使用主题的某一部分（如headlineLarge样式），可以使用select方法仅监听该属性的变化，进一步减少不必要的重建：

class HomeScreen extends ConsumerWidget {
  static String routeName = "home";

  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 仅监听textTheme.headlineLarge的变化
    final headlineMedium = ref.watch(
      themeProvider.select((theme) => theme.textTheme.headlineLarge!)
    );

    if (kDebugMode) {
      print("building home");
    }

    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Text(
              "Hello World",
              style: headlineMedium,
            ),
            SwitchListTile(
              contentPadding: EdgeInsets.zero,
              title: const Text('Theme mode'),
              value: ref.watch(themeModeStateProvider) == ThemeMode.light,
              onChanged: (value) {
                ref.read(themeModeStateProvider.notifier).toggleThemeMode();
              },
            ),
          ],
        ),
      ),
    );
  }
}

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