mcpField
R
riverpod-providers

riverpod-providers

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

关于 riverpod-providers

riverpod-providers 是面向 Dart 和 Flutter 开发者的 Riverpod 技能指南，介绍不同类型的 provider、手动及代码生成声明方式，以及如何读取或更新状态。

主要功能

  1. 01按返回类型和可变性选择 provider
  2. 02手动声明或通过代码生成创建
  3. 03使用 Notifier 管理可变状态
  4. 04在 Flutter 中读取和监听 provider
  5. 05通过 Dart 容器管理 provider

适用场景

  1. 01为获取的数据选择 provider
  2. 02在多个 widget 间共享计算值
  3. 03通过 Notifier 更新界面状态
  4. 04在 Flutter 之外使用 Riverpod

安装

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

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

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

附带文件reference.md

详细介绍

Riverpod — 提供器

说明

提供器是 Riverpod 的核心功能：它们是带有记忆功能的函数，会缓存结果，并允许多个组件（或其他提供器）访问同一个值。提供器声明为顶层 final 变量。状态存储在 ProviderContainer（或 Flutter 中的 ProviderScope）中，而不在提供器本身。

提供器变体
同步FutureStream
不可修改ProviderFutureProviderStreamProvider
可修改NotifierProviderAsyncNotifierProviderStreamNotifierProvider
  • 同步 vs Future vs Stream：根据函数的返回类型选择（int、Future<T>、Stream<T>）。
  • 不可修改：组件只读取值。适用于计算或获取的数据。
  • 可修改：公开一个带有 build() 方法和自定义方法的 Notifier；组件通过 ref.read(provider.notifier).someMethod() 调用方法。适用于 UI 必须更新状态的情况。

根据你想要返回的内容选择类型；提供器类型会自然确定。FutureProvider / AsyncNotifierProvider 最常用。

创建提供器（不可修改 / 函数式）

手动：

final userProvider = FutureProvider<User>((ref) async {
  final response = await http.get('https://api.example.com/user/123');
  return User.fromJson(response.body);
});

代码生成： 使用 @riverpod 注解顶层函数。第一个参数必须是 Ref ref。生成的提供器名称为 functionNameProvider。

@riverpod
Future<User> user(Ref ref) async {
  final response = await http.get('https://api.example.com/user/123');
  return User.fromJson(response.body);
}

修饰符：.autoDispose（或使用 @Riverpod(keepAlive: true) 禁用）以及用于参数的 .family。参见 riverpod-auto-dispose 和 riverpod-family。

创建提供器（可修改 / Notifier）

手动： 使用 NotifierProvider（或 AsyncNotifierProvider / StreamNotifierProvider），并搭配一个继承 Notifier<T>、AsyncNotifier<T> 或 StreamNotifier<T> 的 Notifier 类。重写 build()；不要在构造函数中编写逻辑（此时 ref/state 尚不可用）。通过 ref.read(provider.notifier).method() 调用公有方法。

final counterProvider = NotifierProvider<CounterNotifier, int>(CounterNotifier.new);

class CounterNotifier extends Notifier<int> {
  @override
  int build() => 0;

  void increment() => state++;
}

代码生成： 使用 _$ClassName 的子类并添加注解。重写 build()；添加自定义方法。规则相同：不要在构造函数中编写逻辑。

@riverpod
class CounterNotifier extends _$CounterNotifier {
  @override
  int build() => 0;

  void increment() => state++;
}
使用提供器
  1. Flutter： 使用 ProviderScope 包装应用。使用 Consumer、ConsumerWidget 或 ConsumerStatefulWidget 获取 ref，并调用 ref.watch(provider) 或 ref.read(provider)。
  2. 仅 Dart： 创建 ProviderContainer()，然后调用 container.read(provider) 或 container.listen(...)。完成后调用 container.dispose()。
  3. 在其他提供器中： 使用传递给提供器函数的 Ref（或 Notifier 中的 this.ref）通过 ref.watch / ref.read 访问其他提供器。

组件中的示例：

return Consumer(
  builder: (context, ref, _) {
    final helloWorld = ref.watch(helloWorldProvider);
    return Text(helloWorld);
  },
);

你可以声明多个返回相同类型的提供器；它们彼此独立。关于 Ref、容器、修饰符和 notifier 规则的更多详情，请参见 reference.md。

评论

支持 Markdown