使用Riverpod NotifierProvider结合State类时滑块无法移动的问题排查

我有一个名为State2的应用状态类，包含pos属性：

class State2 {
  double pos = 0.9;
  String anotherProerty = "anotherproperty";
}

尝试使用Riverpod的NotifierProvider，在ConsumerWidget中利用该pos属性实现滑块功能，但滑块无法拖动。对比用简单NotifierProvider实现的第二个滑块功能正常，请问问题出在哪里？以下是完整代码：

class Position1 extends Notifier<double> {
  @override
  double build() {
    return 0.1;
  }

  void updatePos(double newPos) {
    state = newPos;
  }
}

final position1Provider = NotifierProvider<Position1, double>(Position1.new);

class State2 {
  double pos = 0.9;
  String anotherProerty = "anotherproperty";
}

class State2Notifier extends Notifier<State2> {
  @override
  State2 build() {
    return State2();
  }

  void updatePos(double pos) {
    state.pos = pos;
  }
}

final state2Provider =
    NotifierProvider<State2Notifier, State2>(State2Notifier.new);

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final pos1 = ref.watch(position1Provider);
    return Scaffold(
        appBar: AppBar(
          title: const Text("Riverpod Sample 2"),
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        ),
        body: Column(
          children: [
            Text("Pos1: $pos1"),
            Slider(
                value: pos1,
                onChanged: (newPosition) {
                  ref.read(position1Provider.notifier).updatePos(newPosition);
                }),
            Slider(
                value: ref.watch(state2Provider).pos,
                onChanged: (newPosition) {
                  ref.read(state2Provider.notifier).updatePos(newPosition);
                })
          ],
        ));
  }
}

Riverpod的Notifier机制依赖不可变状态更新触发UI刷新：

• 对于Position1这种值类型（double），直接赋值state = newPos会替换整个状态实例，Riverpod能检测到状态变化，进而触发ConsumerWidget重建，滑块正常响应。
• 而State2Notifier中，直接修改state.pos属性（可变更新），没有替换整个State2实例。Riverpod无法感知这种内部属性变化，因此不会触发UI刷新，滑块的value始终停留在初始值，看起来无法拖动。

必须通过创建新的State2实例更新状态，让Riverpod检测到状态变化。推荐两种实现方式：

方式1：临时对象替换状态 #

修改State2Notifier的updatePos方法：

void updatePos(double pos) {
  // 创建新State2实例，保留原有属性并更新pos
  state = State2()
    ..pos = pos
    ..anotherProerty = state.anotherProerty;
}

方式2：将State2改为不可变类（更规范） #

先重构State2为不可变类，并添加copyWith方法方便属性更新：

class State2 {
  final double pos;
  final String anotherProerty;

  // 带默认值的构造函数
  const State2({this.pos = 0.9, this.anotherProerty = "anotherproperty"});

  // 复制方法，仅更新指定属性
  State2 copyWith({double? pos, String? anotherProerty}) {
    return State2(
      pos: pos ?? this.pos,
      anotherProerty: anotherProerty ?? this.anotherProerty,
    );
  }
}

再修改State2Notifier的updatePos方法：

void updatePos(double pos) {
  // 使用copyWith创建新实例，更新pos属性
  state = state.copyWith(pos: pos);
}

修改完成后，状态更新会触发Riverpod的监听机制，ConsumerWidget会重新构建，滑块即可正常拖动。

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