riverpod-getting-started

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Riverpod — Getting Started

Riverpod — 入门指南

Instructions

操作步骤

Installing the package

安装包

Riverpod is available as a main package (Flutter:

flutter_riverpod

; Dart-only:

riverpod

). Optional packages add code generation and hooks.

Flutter:

bash

flutter pub add flutter_riverpod

With code generation:

bash

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

Dart only:

bash

dart pub add riverpod

With code generation:

bash

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

Manual
pubspec.yaml
(Flutter):

yaml

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

Then run

flutter pub get

(or

dart pub get

for Dart-only).

If using code generation, run:

dart run build_runner watch -d

Note: Some Riverpod packages may require Flutter's beta channel for compatibility with latest

json_serializable

. If

pub get

fails, try

flutter channel beta

or use Riverpod

<=3.1.0

Riverpod提供主包（Flutter项目使用

flutter_riverpod

；仅Dart项目使用

riverpod

）。可选包可添加代码生成与hooks功能。

Flutter项目：

bash

flutter pub add flutter_riverpod

若使用代码生成：

bash

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

仅Dart项目：

bash

dart pub add riverpod

若使用代码生成：

bash

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

手动配置
pubspec.yaml
（Flutter项目）：

yaml

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包为兼容最新版

json_serializable

，可能需要使用Flutter的beta通道。若

pub get

执行失败，可尝试切换至

flutter channel beta

或使用版本号

<=3.1.0

的Riverpod。

Wrap the app in ProviderScope

将应用包裹在ProviderScope中

Widgets need a

ProviderScope

(Flutter) or a

ProviderContainer

(Dart) to read providers.

Flutter — ProviderScope:

dart

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

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

Dart only — ProviderContainer:

dart

final container = ProviderContainer();
final value = container.read(helloWorldProvider);
print(value);
// Don't forget to container.dispose() when done

组件需要

ProviderScope

（Flutter项目）或

ProviderContainer

（仅Dart项目）才能读取providers。

Flutter项目 — ProviderScope：

dart

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

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

仅Dart项目 — ProviderContainer：

dart

final container = ProviderContainer();
final value = container.read(helloWorldProvider);
print(value);
// Don't forget to container.dispose() when done

Hello world (Flutter with code generation)

Hello World示例（使用代码生成的Flutter项目）

dart

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)),
      ),
    );
  }
}

Run

dart run build_runner build

(or

watch

) to generate

main.g.dart

. Without code generation, use a manual provider (e.g.

final helloWorldProvider = Provider<String>((ref) => 'Hello world');

) and the same

ProviderScope

ConsumerWidget

pattern.

dart

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

模式。

Enabling riverpod_lint

启用riverpod_lint

Add the optional linter via

analysis_options.yaml

yaml

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

This provides lint rules and refactorings for Riverpod. See the riverpod_lint package page for the full list.

通过

analysis_options.yaml

添加可选的linter：

yaml

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

这将为Riverpod提供lint规则与重构功能。完整规则列表请查看riverpod_lint包的页面。

Going further

进阶内容

Code generation and hooks: See the riverpod-codegen-and-hooks skill (or docs: About code generation, About hooks).
VS Code / Android Studio: Consider Flutter Riverpod Snippets extensions for faster boilerplate.

代码生成与hooks： 请查看riverpod-codegen-and-hooks技能文档（或官方文档：关于代码生成、关于hooks）。
VS Code / Android Studio： 可考虑安装Flutter Riverpod Snippets扩展，快速生成模板代码。