一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

---

Riverpod的官方文档有多国语言，但是没有汉语，所以个人简单翻译了一版。

官网文档：Riverpod

GitHub：GitHub - rrousselGit/river_pod

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

译时版本：riverpod 1.0.3

---

开始

在深入了解 Riverpod 的内部机制之前，我们先从基础开始：安装 RiverPod，然后写一个 “Hello World” 。

安装哪些包

在开始之前，需要意识到 Riverpod 是分布在多个包中，有一些细微的不同用法。

安装 Riverpod 的不同版本取决于开发的应用。

可以参考下表帮助决定使用哪个包：

应用类型	包名	描述
只有Flutter	flutter_riverpod	Riverpod 在 flutter 上使用的基本方式。
Flutter + flutter_hooks	hooks_riverpod	同时使用 flutter_hooks 和 Riverpod 。
只有 Dart (没有 Flutter)	riverpod	剥离所有 Flutter 相关类的 Riverpod 版本。

安装包

决定了想要安装的包之后，即可添加下面的内容到 pubspec.yaml 中：

• Flutter + flutter_hooks :

  pubspec.yaml

  environment:
    sdk: ">=2.12.0 <3.0.0"
    flutter: ">=2.0.0"
  
  dependencies:
    flutter:
      sdk: flutter
    flutter_hooks: ^0.18.0
    hooks_riverpod: ^2.0.0-dev.4
  

  之后运行 flutter pub get 。

• Flutter

  pubspec.yaml

  environment:
    sdk: ">=2.12.0 <3.0.0"
    flutter: ">=2.0.0"
  
  dependencies:
    flutter:
      sdk: flutter
    flutter_riverpod: ^2.0.0-dev.4
  

  之后运行 flutter pub get 。

• Dart only

  pubspec.yaml

  environment:
    sdk: ">=2.12.0-0 <3.0.0"
  
  dependencies:
    riverpod: ^2.0.0-dev.4
  

  之后运行 dart pub get 。

好了，你已经将 Riverpod 添加到你的应用中了！

用法示例：Hello world

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

The following snippets showcase how to use our new dependency to make a "Hello world":

下面的代码版本展示了如何使用新的依赖开发一个 "Hello world"：

• Flutter + flutter_hooks

  lib/main.dart

  import 'package:flutter/material.dart';
  import 'package:hooks_riverpod/hooks_riverpod.dart';
  
  // 创建一个 "provider"，它会存储一个值 （在这里是 "Hello world"）。
  // 通过使用 provider， 这使我们可以模拟/覆写暴露的值。
  final helloWorldProvider = Provider((_) => 'Hello world');
  
  void main() {
    runApp(
      // 为了使组件能读取 provider ，我们需要将整个应用包装在一个 "ProviderScope" 组件中。
      // 这是 provider 的状态要存储的地方。
      ProviderScope(
        child: MyApp(),
      ),
    );
  }
  
  // 注意：MyApp 是一个 HookConsumerWidget，在 hooks_riverpod 包中。
  class MyApp extends HookConsumerWidget {
    @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),
          ),
        ),
      );
    }
  }
  

  运行 flutter run ，会在设备中渲染 "Hello world" 。

• Flutter

  lib/main.dart

  import 'package:flutter/material.dart';
  import 'package:flutter_riverpod/flutter_riverpod.dart';
  
  // 创建一个 "provider"，它会存储一个值 （在这里是 "Hello world"）。
  // 通过使用 provider， 这使我们可以模拟/覆写暴露的值。
  final helloWorldProvider = Provider((_) => '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),
          ),
        ),
      );
    }
  }
  

  运行 flutter run ，会在设备中渲染 "Hello world" 。

• Dart only

  lib/main.dart

  import 'package:riverpod/riverpod.dart';
  
  // 创建一个 "provider"，它会存储一个值 （在这里是 "Hello world"）。
  // 通过使用 provider， 这使我们可以模拟/覆写暴露的值。
  final helloWorldProvider = Provider((_) => 'Hello world');
  
  void main() {
    // 该对象是 provider 的状态要存储的地方。
    final container = ProviderContainer();
  
    // 通过 "container" ，可以读取 provider。
    final value = container.read(helloWorldProvider);
  
    print(value); // Hello world
  }
  

  运行 dart lib/main.dart ，会在控制台打印 "Hello world" 。

更进一步：安装代码片段

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

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

选择下一步

学习一些基础概念：

• 学习 provider 的更多内容 [中文]

跟着手册学习：

• 如何测试 provider[中文]

---