[译][官方文档] Flutter/Dart 状态管理库 RiverPod （二）- 开始使用 RiverPod

原文链接：Getting started | Riverpod

pub：riverpod | Dart Package (flutter-io.cn)

译时版本： 2.4.5

---

之前翻译过 RiverPod 的官方文档，现在随着版本更新，官方文档又多了很多新内容，所以再补充翻译一下。

之前翻译过的内容，现在官方文档有中文了。
Flutter状态管理库Riverpod官方文档翻译汇总 - 掘金 (juejin.cn)

---

开始使用 RiverPod

安装包

知道需要安装的包了，就可以如下在应用中添加依赖：

• Flutter

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

• 仅 Dart

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

也可以手动在应用的 pubspec.yaml 中添加依赖：

• Flutter

pubspec.yaml

name: my_app_name
environment:
  sdk: ">=3.0.0 <4.0.0"
  flutter: ">=3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.4.5
  riverpod_annotation: ^2.3.0

dev_dependencies:
  build_runner:
  custom_lint:
  riverpod_generator: ^2.3.5
  riverpod_lint: ^2.3.3

• 仅 Dart

pubspec.yaml

name: my_app_name
environment:
  sdk: ">=3.0.0 <4.0.0"

dependencies:
  riverpod: ^2.4.5
  riverpod_annotation: ^2.3.0

dev_dependencies:
  build_runner:
  custom_lint:
  riverpod_generator: ^2.3.5
  riverpod_lint: ^2.3.3

然后，使用 flutter pub get 安装包。

现在可以通过 dart run build_runner watch 命令运行代码生成器。

就这些。这样就为应用安装了 Riverpod 了！

使 riverpod_lint/custom_lint 可用。

Riverpod 自带可选的 riverpod_lint 包，它提供了提示规则有助于写出更好的代码，并提供了可定制的重构选项。

使用前面的步骤安装的话，riverpod_lint 包就已经安装上了。

但是需要一个单独的步骤使其可用。

要使 riverpod_lint 可用，需要在 analysis_options.yaml （该文件和 pubspec.yaml 在同级）文件中添加以下代码：

analysis_options.yaml：

analyzer:
  plugins:
    - custom_lint

在代码库中用 Riverpod 时如果有错误的话，则会在 IDE 中看到警告。

要查看所有的警告和重构信息，可移步 riverpod_lint 页面。

注意：

这些警告不会在 dart analyze 中显示。 如果想在 CI/终端 中查看这些错误， 需要运行以下命令：

dart run custom_lint

用法示例： Hello world

已经安装了 Riverpod，现在可以开始使用它了。

以下代码片段展示了如果用新的依赖来创建 "Hello world" ：

• Flutter lib/main.dart

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

part 'main.g.dart';

// 创建一个 "provider" ，它存储一个值（这里是 "Hello world"）。
// 使用 provider ，这能让我们 mock 或重写显露的值。
@riverpod
String helloWorld(HelloWorldRef ref) {
  return 'Hello world';
}

void main() {
  runApp(
    // 为了让组件能够读取 provider ，需要将整个应用用 "ProviderScope" 组件包裹起来。
    // 这也是存储 provider 的状态的地方。
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// 继承 ConsumerWidget 而不是 StatelessWidget ，由 Riverpod 提供。
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 only

lib/main.dart

import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

// 创建一个 "provider" ，它存储一个值（这里是 "Hello world"）。
// 使用 provider ，这能让我们 mock 或重写显露的值。
@riverpod
String helloWorld(HelloWorldRef ref) {
  return 'Hello world';
}

void main() {
  // 该对象是存储 provider 的状态的地方。
  final container = ProviderContainer();

  // 用 "container" ，就可以读取 provider 了。
  final value = container.read(helloWorldProvider);

  print(value); // Hello world
}

然后，用 flutter run 运行应用。就可以在设备上渲染 "Hello world" 了。

更进一步：安装代码片段

如果是使用 Flutter 和 VS Code ，可以考虑使用 Flutter Riverpod 代码片段

如果是使用 Flutter 和 Android Studio 或 IntelliJ ，可以考虑使用 Flutter Riverpod 代码片段

选择下一步

学习一些基概念:

• Providers

关注实战手册:

• Testing

---