はじめに
Riverpod の仕組みについて深掘りする前に、まずはパッケージのインストール方法をご紹介します。 そして Riverpod を使って定番の Hello world を表示させたいと思います。
インストールするパッケージの種類
Riverpod には複数の種類のパッケージがあり、それぞれ使用目的が若干異なります。 どの Riverpod パッケージをインストールするかは作るアプリの形態によります。
こちらはその対応表です。
アプリの形態 | パッケージ名 | 説明 |
---|---|---|
Flutter のみ | flutter_riverpod | Flutter アプリで Riverpod を使用する場合の基本のパッケージ。 |
Flutter + flutter_hooks | hooks_riverpod | flutter_hooks と Riverpod を併用する場合のパッケージ。 |
Dart のみ(Flutter は使用しない) | riverpod | Flutter 関連のクラスをすべて除いた Riverpod パッケージ。 |
パッケージのインストール方法
インストールするパッケージの種類が決まったら、パッケージ名とそのバージョン番号を次のように pubspec.yaml
に追加してください。
- Flutter + flutter_hooks
- Flutter
- Dart のみ
environment:
sdk: ">=2.12.0 <3.0.0"
flutter: ">=2.0.0"
dependencies:
flutter:
sdk: flutter
flutter_hooks: ^0.18.0
hooks_riverpod: ^2.1.1
そして flutter pub get
コマンドを実行してください。
environment:
sdk: ">=2.12.0 <3.0.0"
flutter: ">=2.0.0"
dependencies:
flutter:
sdk: flutter
flutter_riverpod: ^2.1.1
そして flutter pub get
コマンドを実行してください。
environment:
sdk: ">=2.12.0-0 <3.0.0"
dependencies:
riverpod: ^2.1.1
そして dart pub get
コマンドを実行してください。
これで Riverpod がアプリに追加されました!
Hello world の表示
インストールが完了したところで、Riverpod の使用方法を確認していきましょう。
次のサンプルコードを実行すると Hello world が画面に表示されます。
- Flutter + flutter_hooks
- Flutter
- Dart のみ
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
// 値(ここでは "Hello world")を格納する「プロバイダ」を作成します。
// プロバイダを使うことで値のモックやオーバーライドが可能になります。
final helloWorldProvider = Provider((_) => 'Hello world');
void main() {
runApp(
// プロバイダをウィジェットで利用するには、アプリ全体を
// `ProviderScope` ウィジェットで囲む必要があります。
// ここに各プロバイダのステート(状態)・値が格納されていきます。
ProviderScope(
child: MyApp(),
),
);
}
// flutter_hooks 併用時は hooks_riverpod の HookConsumerWidget を継承します。
class MyApp extends HookConsumerWidget {
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 が表示されるはずです。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// 値(ここでは "Hello world")を格納する「プロバイダ」を作成します。
// プロバイダを使うことで値のモックやオーバーライドが可能になります。
final helloWorldProvider = Provider((_) => 'Hello world');
void main() {
runApp(
// プロバイダをウィジェットで利用するには、アプリ全体を
// `ProviderScope` ウィジェットで囲む必要があります。
// ここに各プロバイダのステート(状態)・値が格納されていきます。
ProviderScope(
child: MyApp(),
),
);
}
// StatelessWidget の代わりに Riverpod の ConsumerWidget を継承します。
class MyApp extends ConsumerWidget {
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 が表示されるはずです。
import 'package:riverpod/riverpod.dart';
// 値(ここでは "Hello world")を格納する「プロバイダ」を作成します。
// プロバイダを使うことで値のモックやオーバーライドが可能になります。
final helloWorldProvider = Provider((_) => 'Hello world');
void main() {
// `ProviderContainer` に各プロバイダのステート(状態)・値が格納されていきます。
final container = ProviderContainer();
// `container` から `helloWorldProvider` の値を取得します。
final value = container.read(helloWorldProvider);
print(value); // Hello world
}
dart lib/main.dart
コマンドを実行してみてください。
コンソールに Hello world と出力されるはずです。
コードスニペット機能の利用
Flutter
を VS Code
で利用している場合は、拡張機能の
Flutter Riverpod Snippets
で Riverpod 専用のコードスニペット機能を使うことができます。
Flutter
を Android Studio
もしくは IntelliJ
で利用している場合は、
Flutter Riverpod Snippets
を利用してください。
次のステップ
基本コンセプトを学ぶ:
具体的な使用方法を学ぶ: