Flutter Web中带autoDispose的StateNotifierProvider触发栈溢出错误

你遇到的Flutter Web平台栈溢出问题并非autoDispose与StateNotifierProvider不兼容，而是代码写法或平台特定机制导致的循环引用/重复重建问题。以下是针对性的解决方案：

方案1：移除不必要的Ref引用 #

如果你的HomeController不需要依赖Ref（比如不需要读取其他Provider、监听生命周期），直接去掉Ref参数即可避免潜在的循环引用：

修改HomeController：

class HomeController extends StateNotifier<HomeState> {
  HomeController() : super(const HomeState());

  void changeData(String data) {
    state = state.copyWith(data: data);
  }
}

修改Provider定义：

final homeControllerProvider =
    StateNotifierProvider.autoDispose<HomeController, HomeState>(
        (ref) => HomeController());

方案2：使用AutoDisposeRef并添加清理逻辑 #

如果必须在HomeController中使用Ref，明确指定AutoDisposeRef类型，并通过ref.onDispose添加清理逻辑，确保资源正确释放：

修改Provider定义：

final homeControllerProvider =
    StateNotifierProvider.autoDispose<HomeController, HomeState>(
        (AutoDisposeRef ref) => HomeController(ref));

修改HomeController：

class HomeController extends StateNotifier<HomeState> {
  HomeController(this.ref) : super(const HomeState()) {
    // 注册销毁回调，可在此清理订阅、流等资源
    ref.onDispose(() {
      // 示例：如果有监听操作，在这里取消
    });
  }
  final AutoDisposeRef ref;

  void changeData(String data) {
    state = state.copyWith(data: data);
  }
}

方案3：升级Riverpod到最新稳定版 #

部分旧版本的Riverpod在Flutter Web平台的autoDispose机制存在bug，升级到riverpod: ^2.3.0及以上的稳定版本，大概率能解决该栈溢出问题。

替代方案：手动管理状态重置 #

如果上述方法仍无效，可以放弃autoDispose，手动在Widget销毁时重置状态：

在Home Widget中添加销毁回调：

class Home extends ConsumerWidget {
  const Home({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final status = ref.watch(homeControllerProvider);
    
    // 当Widget销毁时重置状态
    ref.onDispose(() {
      ref.read(homeControllerProvider.notifier).changeData('hello world');
    });

    return Scaffold(
      body: Center(
        child: Text(status.data.toString()),
      ),
    );
  }
}

Provider去掉autoDispose：

final homeControllerProvider =
    StateNotifierProvider<HomeController, HomeState>(
        (ref) => HomeController(ref));

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