开始上手

在线尝试Riverpod

在Dartpad 上感受Riverpod的魅力。

安装package

按照你的需要添加下列代码到你的pubspec.yaml文件中：

Flutter
仅Dart

pubspec.yaml
name: my_app_name
environment:
  sdk: ">=2.17.0 <3.0.0"
  flutter: ">=3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.1.3
  riverpod_annotation: ^1.1.1

dev_dependencies:
  build_runner:
  riverpod_generator: ^1.1.1

然后使用 flutter pub get 命令来安装package。

最后，用命令来运行代码生成工具flutter pub run build_runner watch

pubspec.yaml
name: my_app_name
environment:
  sdk: ">=2.17.0 <3.0.0"

dependencies:
  riverpod: ^2.1.3
  riverpod_annotation: ^1.1.1

dev_dependencies:
  build_runner:
  riverpod_generator: ^1.1.1

然后使用 dart pub get 命令来安装package。

最后，用命令来运行代码生成工具flutter pub run build_runner watch

就是这样，你成功将Riverpod添加到你的应用当中!

使用示例: Hello world

安装完Riverpod，我们就可以使用了。

下面的代码片段展示了如何使用我们的新依赖来创建一个 "Hello world"：

Flutter
仅Dart

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，我们能够重写或模拟这个暴露的值
@riverpod
String helloWorld(HelloWorldRef ref) {
  return 'Hello world';
}

void main() {
  runApp(
    // 为了让widget能够读取到provider，我们需要在整个应用外面套上一个
    // 名为 "ProviderScope"的widget。
    // 我们的这些provider会在这里保存。
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// 这里我们使用Rivderpod提供的 "ConsumerWidget" 而不是flutter自带的 "StatelessWidget"。
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" 的文字。

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

part 'main.g.dart';

// 我们创建了一个 "provider", 这里它存储了一个值 (这里是 "Hello world")。
// 通过使用provider，我们能够重写或模拟这个暴露的值
@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
}