mcpField
R
riverpod-getting-started

riverpod-getting-started

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

关于 riverpod-getting-started

riverpod-getting-started 是 Riverpod 入门技能，面向 Flutter 和 Dart 开发者，介绍安装、Provider 设置、代码生成及 lint 配置。

主要功能

  1. 01Flutter 与 Dart 安装步骤
  2. 02配置 ProviderScope 或 ProviderContainer
  3. 03Provider 的基础示例
  4. 04代码生成设置
  5. 05riverpod_lint 配置

适用场景

  1. 01为 Flutter 项目添加 Riverpod
  2. 02在纯 Dart 项目中读取 Provider
  3. 03启用代码生成并运行构建器
  4. 04为 Riverpod 配置 lint 规则

安装

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

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

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

详细介绍

Riverpod — 快速入门

说明

安装软件包

Riverpod 提供主软件包（Flutter：flutter_riverpod；仅 Dart：riverpod）。可选软件包可添加代码生成和 hooks。

Flutter：

flutter pub add flutter_riverpod

使用代码生成：

flutter pub add flutter_riverpod riverpod_annotation
flutter pub add dev:riverpod_generator build_runner

仅 Dart：

dart pub add riverpod

使用代码生成：

dart pub add riverpod riverpod_annotation
dart pub add dev:riverpod_generator build_runner

手动配置 pubspec.yaml（Flutter）：

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.0.0  # use latest from pub.dev

dev_dependencies:
  build_runner:
  riverpod_generator: ^2.0.0  # if using code generation

然后运行 flutter pub get（仅 Dart 项目则运行 dart pub get）。

如果使用代码生成，请运行：

dart run build_runner watch -d

注意： 部分 Riverpod 软件包可能需要使用 Flutter beta 通道，才能与最新版本的 json_serializable 兼容。如果 pub get 失败，请尝试运行 flutter channel beta，或使用 Riverpod <=3.1.0。

使用 ProviderScope 包装应用

Widget 需要 ProviderScope（Flutter）或 ProviderContainer（Dart）才能读取 Provider。

Flutter — ProviderScope：

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

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

仅 Dart — ProviderContainer：

final container = ProviderContainer();
final value = container.read(helloWorldProvider);
print(value);
// Don't forget to container.dispose() when done
Hello world（使用代码生成的 Flutter）
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

@riverpod
String helloWorld(Ref ref) {
  return 'Hello world';
}

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Example')),
        body: Center(child: Text(value)),
      ),
    );
  }
}

运行 dart run build_runner build（或 watch）以生成 main.g.dart。如果不使用代码生成，可以使用手动定义的 Provider（例如 final helloWorldProvider = Provider<String>((ref) => 'Hello world');），并采用相同的 ProviderScope + ConsumerWidget 模式。

启用 riverpod_lint

通过 analysis_options.yaml 添加可选的 lint 工具：

plugins:
  riverpod_lint: ^2.0.0  # use latest from https://pub.dev/packages/riverpod_lint

它提供 Riverpod 的 lint 规则和重构功能。完整列表请参阅 riverpod_lint 软件包页面。

深入了解
  • 代码生成和 hooks： 请参阅 riverpod-codegen-and-hooks 技能（或文档：关于代码生成、关于 hooks）。
  • VS Code / Android Studio： 可以考虑安装 Flutter Riverpod Snippets 扩展，以便更快地编写样板代码。

评论

支持 Markdown