mcpField
R
riverpod-consumers

riverpod-consumers

github.com/serverpod开发10105 次安装34 周前更新
代码仓库

关于 riverpod-consumers

此 Riverpod 技能说明 Flutter Widget 如何通过不同 Consumer 类型访问并监听 Provider，帮助开发者根据状态需求选择 Consumer、ConsumerWidget 或 ConsumerStatefulWidget。

主要功能

  1. 01在现有 Widget 类中使用 Consumer
  2. 02通过 ConsumerWidget 和 WidgetRef 构建
  3. 03用 ConsumerStatefulWidget 管理本地状态
  4. 04按 Widget 需求选择 Consumer 类型
  5. 05了解基于 ref 的 Provider 监听

适用场景

  1. 01从 StatelessWidget 读取 Provider
  2. 02在有状态 Widget 中监听 Provider
  3. 03在动画或 TabController 中使用 Provider 数据
  4. 04选择 Riverpod Consumer 模式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/serverpod/skills-registry --skill riverpod-consumers

安装后在 Claude Code 中输入/riverpod-consumers确认已加载。

详细介绍

Riverpod — 消费者

说明

消费者是提供 Ref（此处为 WidgetRef）的组件，供你读取和监听提供者。没有 Consumer，组件就无法访问提供者树。

Consumer（构建器）

如果你想继续使用 StatelessWidget 或 StatefulWidget，请使用 Consumer。构建器回调会接收 (context, ref, child)。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, ref, _) {
        final value = ref.watch(myProvider);
        return Text(value.toString());
      },
    );
  }
}
ConsumerWidget

继承 ConsumerWidget，而不是 StatelessWidget。build 方法会接收 (BuildContext context, WidgetRef ref)。

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final value = ref.watch(myProvider);
    return Text(value.toString());
  }
}
ConsumerStatefulWidget + ConsumerState

如果需要 State（例如用于生命周期或本地状态），请使用 ConsumerStatefulWidget 和 ConsumerState。状态对象有一个 ref 属性。

class MyWidget extends ConsumerStatefulWidget {
  @override
  ConsumerState<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends ConsumerState<MyWidget> {
  @override
  Widget build(BuildContext context) {
    final value = ref.watch(myProvider);
    return Text(value.toString());
  }
}
该用哪种
  • Consumer — 如果你不想更改组件基类，所有情况都可以使用；只是会稍微冗长一些。
  • ConsumerWidget — 如果不需要 State，推荐使用；嵌套层级更少。
  • ConsumerStatefulWidget — 如果需要 State（例如 TabController、动画），请使用。
为什么不使用 StatelessWidget + context.watch？

Riverpod 不使用 BuildContext 来监听提供者，因为这会破坏 auto-dispose 以及其他依赖于获知组件何时停止监听的功能。基于 Ref 的消费者可以确保可靠释放和正确行为。hooks_riverpod 包还提供了 HookConsumerWidget 等组件，供 flutter_hooks 使用。启用 riverpod_lint 可进行 IDE 重构（例如“转换为 ConsumerWidget”）。

评论

支持 Markdown