このチャプターの目次
インストールするべきパッケージの選び方
Riverpodのパッケージには3種類あります。
- riverpod
https://pub.dev/packages/riverpod - flutter_riverpod
https://pub.dev/packages/flutter_riverpod - hooks_riverpod
https://pub.dev/packages/hooks_riverpod
1番目の riverpod
は、
Flutterに関連するすべてのクラスが削除された、Dartのみのバージョンです。
通常、Flutterでのアプリ開発では選択しないと思いますが、Flutter機能を使用しないパッケージではこちらを使用することになるかと思います。
2番目の flutter_riverpod
は、
Flutterで Riverpod を使う上での基本的な利用方法です。
3番目の hooks_riverpod
は、
後述の flutter_hooks
を併せて使う方法です。
以下のいずれかに当てはまる場合は使用を検討すると良いかもしれません。
-
flutter_hooks
パッケージをすでに使っている -
flutter_hooks
パッケージを導入してHooks機能を使う予定がある
hooks_riverpod
と flutter_riverpod
の書き方の違い
どちらのRiverpodパッケージをインストールしても、
基本的な書き方は変わりません。Riverpod v1.0 以降、記法の差異がなくなりました。
WidgetでのProviderを読み取る時の書き方
Hooks機能を使用しないWidgetの場合は、パッケージに関係なく ConsumerWidget
を使用できます。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final appNameProvider = Provider((ref) => 'Special App!');
// StatelessWidgetの代わりに `ConsumerWidget` を継承します。
class MyApp extends ConsumerWidget {
// `ConsumerWidget` では、buildメソッドの引数に
// `WidgetRef ref` が追加されます。
Widget build(BuildContext context, WidgetRef ref) {
// `ref.watch` を使用して Providerを読み取ります。
final String value = ref.watch(appNameProvider);
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Example')),
body: Center(
// Providerから読み取った値を使用
child: Text(value),
),
),
);
}
}
Riverpod と Hooks機能を合わせて使う場合
hooks_riverpod
の場合は、 ConsumerWidget
に加えて HookConsumerWidget
が使用できます。
HookConsumerWidget
の書き方は以下のようになります。
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
// `useXxx` を使用するためには、 `flutter_hooks` のimportも必要です。
import 'package:flutter_hooks/flutter_hooks.dart';
final appNameProvider = Provider((ref) => 'Special App!');
// StatelessWidgetの代わりに `HookConsumerWidget` を継承します。
class MyApp extends HookConsumerWidget {
// `ConsumerWidget` と同じく、buildメソッドの引数に
// `WidgetRef ref` が追加され、使い方も一緒です。
Widget build(BuildContext context, WidgetRef ref) {
// `ref.watch` を使用して Providerを読み取ります。
final String value = ref.watch(appNameProvider);
// `HookConsumerWidget` を継承しているので `useXxx` メソッドが使用できる。
final counter = useState(0);
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Example')),
body: Center(
// Providerから読み取った値と、 `useState` の値を使用する例
child: Text('$value, ${counter.value}'),
),
),
);
}
}
ConsumerWidget
を HookConsumerWidget
に変更するだけです。
riverpodパッケージをインストールする
どの riverpod
パッケージを使うか決めたら、以下のいずれかの方法でインストールしましょう。
- VS Codeでコマンドパレット(⌘ + shift + p)から「Dart: Add Dependency」を選んで検索
- Terminalで
flutter pub add flutter_riverpod
のようにコマンドを実行 - 下記のように
pubspec.yaml
のdependencies
部分に追記し、flutter pub get
pubspec.yaml
dependencies:
# Flutterに依存しないDart only のプロジェクトで使う場合
riverpod: {任意のバージョンを指定}
# FlutterでRiverpodを使う場合
flutter_riverpod: {任意のバージョンを指定}
# Flutter Hooksを一緒に使う場合は、 `hooks_riverpod` に加えて `flutter_hooks` もお忘れなく
flutter_hooks: {任意のバージョンを指定}
hooks_riverpod: {任意のバージョンを指定}
# プロバイダをコード生成する場合は必要です
riverpod_annotation: {任意のバージョンを指定}
dev_dependencies:
# プロバイダをコード生成する場合は必要です
build_runner: {任意のバージョンを指定}
riverpod_generator: {任意のバージョンを指定}
これでアプリ内ファイルでRiverpodが使用できます。
次章では、「Riverpodの使い方」を解説します。