likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 3

!!!译文为作者本人人肉翻译~转载请注明出处!!!


原文链接:Getting started | Riverpod

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

译时版本: 2.4.5



开始使用 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 代码片段

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

选择下一步

学习一些基概念:

关注实战手册: