riverpod-getting-started

Riverpod — はじめに

手順

パッケージのインストール

Riverpod はメインパッケージとして利用できます（Flutter：flutter_riverpod、Dart のみ：riverpod）。オプションのパッケージを追加すると、コード生成とフックを利用できます。

Flutter：

flutter pub add flutter_riverpod

コード生成を使用する場合：

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

Dart のみ：

dart pub add riverpod

コード生成を使用する場合：

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

手動での pubspec.yaml（Flutter）：

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 のベータチャンネルが必要になる場合があります。pub get に失敗する場合は、flutter channel beta を試すか、Riverpod <=3.1.0 を使用してください。

ProviderScope でアプリをラップする

プロバイダーを読み取るには、ウィジェットに ProviderScope（Flutter）または ProviderContainer（Dart）が必要です。

Flutter — ProviderScope：

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

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

Dart のみ — ProviderContainer：

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

Hello world（コード生成を使用した Flutter）

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 を生成します。コード生成を使用しない場合は、手動でプロバイダーを定義し（例：final helloWorldProvider = Provider<String>((ref) => 'Hello world');）、同じ ProviderScope と ConsumerWidget のパターンを使用します。

riverpod_lint を有効にする

analysis_options.yaml にオプションのリンターを追加します。

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

Riverpod のリントルールとリファクタリング機能を利用できます。すべての項目については、riverpod_lint のパッケージページを参照してください。

さらに詳しく

• コード生成とフック： riverpod-codegen-and-hooks スキル（またはドキュメント：コード生成について、フックについて）を参照してください。
• VS Code／Android Studio： 定型コードをすばやく作成するには、Flutter Riverpod Snippets 拡張機能をご検討ください。