为何监听StateProvider状态变化时ConsumerWidget未重建？

问题场景 #

学习Riverpod时，修改主题模式后，使用ref.watch()监听对应StateProvider的App组件并未触发重建，代码如下：

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

final themeModeProvider = StateProvider<ThemeMode>((ref) => themeMode);
var themeMode = ThemeMode.system;

void main() => runApp(const ProviderScope(child: App()));

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      themeMode: ref.watch(themeModeProvider),
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: Scaffold(
        body: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                themeMode = ThemeMode.light;
              },
              child: const Text('light'),
            ),
            ElevatedButton(
              onPressed: () {
                themeMode = ThemeMode.dark;
              },
              child: const Text('dark'),
            ),
          ],
        ),
      ),
    );
  }
}

错误原因 #

• 你直接修改了全局变量themeMode，但这个变量只是StateProvider初始化时的默认值，和Provider内部维护的状态完全独立。
• Riverpod的状态更新必须通过Provider提供的官方API操作，直接修改外部变量不会触发Provider的状态变更通知，自然不会让监听组件重建。

修正后的代码 #

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

// 直接在StateProvider中设置初始状态，无需额外全局变量
final themeModeProvider = StateProvider<ThemeMode>((ref) => ThemeMode.system);

void main() => runApp(const ProviderScope(child: App()));

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      themeMode: ref.watch(themeModeProvider),
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: Scaffold(
        body: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                // 通过notifier更新Provider内部状态
                ref.read(themeModeProvider.notifier).state = ThemeMode.light;
              },
              child: const Text('light'),
            ),
            ElevatedButton(
              onPressed: () {
                ref.read(themeModeProvider.notifier).state = ThemeMode.dark;
              },
              child: const Text('dark'),
            ),
          ],
        ),
      ),
    );
  }
}

核心原理讲解 #

• StateProvider内部会维护一份独立的状态，初始化时的返回值仅作为状态的初始值，后续状态的变更完全由Provider的notifier管理。
• ref.watch(themeModeProvider)监听的是Provider内部的状态，只有当状态通过notifier.state = ...或update()方法更新时，Riverpod才会通知所有监听该Provider的组件触发重建。
• 直接修改外部变量不会影响Provider内部的状态，因此不会触发任何组件重建逻辑。

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