Flutter Riverpod迁移报错：watch调用提示‘表达式未求值为函数’

报错场景 #

将Flutter项目从GetX迁移到Riverpod时，在Consumer的builder中使用watch(countDownControllerProvider).state.isAnimating出现以下错误：

"The expression doesn't evaluate to a function, so it can't be invoked"

问题代码片段：

child: Consumer(
  builder: (context, watch, child) {
    // 错误发生在此处
    final startPausedText = watch(countDownControllerProvider).state.isAnimating;
    // 其余代码...
  },
);

完整代码上下文：

final countDownControllerProvider =
    StateProvider<CountDownController>((ref) => CountDownController());

class StartStopGroupButton extends ConsumerStatefulWidget {
  const StartStopGroupButton({Key? key}) : super(key: key);

  @override
  ConsumerState<StartStopGroupButton> createState() =>
      _StartStopGroupButtonState();
}

class _StartStopGroupButtonState extends ConsumerState<StartStopGroupButton> {
  late final countDownController;

  @override
  void initState() {
    super.initState();
    countDownController = ref.read(countDownControllerProvider);
  }

  @override
  Widget build(BuildContext context, ) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Center(
        child: Consumer(
          builder: (ref, watch, child) {
            final startPausedText =
                watch(countDownControllerProvider).state.isAnimating;

            return FloatingActionButton.extended(
              heroTag: 'btn1',
              elevation: 0,
              backgroundColor: Colors.white,
              onPressed: countDownController.startPaused,
              label: Text(
                startPausedText,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 24.0,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

错误原因 #

1. Riverpod版本API不匹配：你使用的是Riverpod 2.x版本，但代码沿用了1.x的写法。Riverpod 2.x中，Consumer的builder回调第二个参数不再是watch函数，而是WidgetRef类型的ref，直接调用watch()会报错，因为ref不是函数。
2. StateProvider使用不当：StateProvider设计用于存储简单状态（如int、bool、String），不适合存储自定义的CountDownController这类包含业务逻辑的控制器，应该使用NotifierProvider或StateNotifierProvider。
3. 类型不匹配：isAnimating是布尔值，直接赋值给startPausedText后传给Text组件，会导致类型错误（Text需要String类型）。

解决步骤 #

1. 适配Riverpod 2.x API #

将Consumer builder中的watch替换为ref.watch：

builder: (context, ref, child) {
  final controllerState = ref.watch(countDownControllerProvider);
  // ...
}

2. 替换为合适的Provider类型 #

把StateProvider换成NotifierProvider（以Riverpod 2.x为例），先定义CountDownController为Notifier：

class CountDownController extends Notifier<bool> {
  @override
  bool build() => false; // 初始状态：未动画

  void startPaused() {
    state = !state; // 切换动画状态
  }
}

final countDownControllerProvider = NotifierProvider<CountDownController, bool>(
  () => CountDownController(),
);

3. 修正文本显示逻辑 #

将布尔状态转为对应的文本：

final isAnimating = ref.watch(countDownControllerProvider);
final startPausedText = isAnimating ? '暂停' : '开始';

4. 调整控制器调用方式 #

不需要在initState中提前read，直接通过ref.read获取控制器方法：

onPressed: () => ref.read(countDownControllerProvider.notifier).startPaused(),

修正后的完整代码 #

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

class CountDownController extends Notifier<bool> {
  @override
  bool build() => false;

  void startPaused() {
    state = !state;
  }
}

final countDownControllerProvider = NotifierProvider<CountDownController, bool>(
  () => CountDownController(),
);

class StartStopGroupButton extends ConsumerStatefulWidget {
  const StartStopGroupButton({Key? key}) : super(key: key);

  @override
  ConsumerState<StartStopGroupButton> createState() =>
      _StartStopGroupButtonState();
}

class _StartStopGroupButtonState extends ConsumerState<StartStopGroupButton> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Center(
        child: Consumer(
          builder: (context, ref, child) {
            final isAnimating = ref.watch(countDownControllerProvider);
            final startPausedText = isAnimating ? '暂停' : '开始';

            return FloatingActionButton.extended(
              heroTag: 'btn1',
              elevation: 0,
              backgroundColor: Colors.white,
              onPressed: () => ref.read(countDownControllerProvider.notifier).startPaused(),
              label: Text(
                startPausedText,
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 24.0,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者pomoworko.com