Flutter Riverpod新版本中HookWidget替代ProviderListener的方法

Riverpod新版本里ProviderListener组件已被弃用，官方要求用WidgetRef.listen替代，在HookWidget中的具体替换方法如下：

原弃用写法（ProviderListener） #

class SignUP extends HookWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: DefaultColors.$lightBlue,
      child: SafeArea(
        child: Directionality(
          textDirection: TextDirection.rtl,
          child: ProviderListener<NetworkRequestState<LoginResponseStructure>>(
            provider: loginProvider,
            onChange: (BuildContext context,
                NetworkRequestState<LoginResponseStructure> loginState) {
              loginState.when(
                idle: () {
                  enableTextField.value = true;
                },
                loading: () {
                  // 加载状态处理逻辑
                },
                success: (value) {
                  final LoginResponseStructure _res = value as LoginResponseStructure;
                  if (_res.statusCode == 1) {
                    // 登录成功逻辑
                  } else {
                    // 其他状态处理
                  }
                },
                error: (error, stackTrace) {
                  enableTextField.value = true;
                },
              );
            },
            child: const Scaffold(),
          ),
        ),
      ),
    );
  }
}

替换后的写法（WidgetRef.listen） #

class SignUP extends HookWidget {
  @override
  Widget build(BuildContext context) {
    // 获取WidgetRef实例
    final ref = useProviderRef();

    // 监听loginProvider的状态变化，替代原ProviderListener的onChange逻辑
    ref.listen<NetworkRequestState<LoginResponseStructure>>(
      loginProvider,
      (previousState, currentState) {
        currentState.when(
          idle: () {
            enableTextField.value = true;
          },
          loading: () {
            // 加载状态处理逻辑
          },
          success: (value) {
            final LoginResponseStructure _res = value as LoginResponseStructure;
            if (_res.statusCode == 1) {
              // 登录成功逻辑
            } else {
              // 其他状态处理
            }
          },
          error: (error, stackTrace) {
            enableTextField.value = true;
          },
        );
      },
    );

    return Container(
      color: DefaultColors.$lightBlue,
      child: SafeArea(
        child: Directionality(
          textDirection: TextDirection.rtl,
          child: const Scaffold(),
        ),
      ),
    );
  }
}

核心改动点 #

1. 移除ProviderListener组件：直接在build方法里获取WidgetRef，无需再用ProviderListener包裹子组件
2. 用ref.listen监听状态：传入要监听的provider和状态变化回调，原onChange里的逻辑直接迁移到这个回调中
3. 新增前状态参数：回调函数会返回previousState（前一个状态）和currentState（当前状态），如果需要对比状态变化可以用上这个参数，原ProviderListener只提供当前状态

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