はじめに

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 のみ

pubspec.yaml
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 コマンドを実行してください。

pubspec.yaml
environment:
  sdk: ">=2.12.0 <3.0.0"
  flutter: ">=2.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.1.1

そして flutter pub get コマンドを実行してください。

pubspec.yaml
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 のみ

lib/main.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 {
  @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: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 {
  @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';

// 値（ここでは "Hello world"）を格納する「プロバイダ」を作成します。
// プロバイダを使うことで値のモックやオーバーライドが可能になります。
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  // `ProviderContainer` に各プロバイダのステート（状態）・値が格納されていきます。
  final container = ProviderContainer();

  // `container` から `helloWorldProvider` の値を取得します。
  final value = container.read(helloWorldProvider);

  print(value); // Hello world
}