Chapter 30無料公開

[v1-dev] Riverpodの選び方とインストール

村松龍之介
村松龍之介
2021.10.10に更新

インストールするべきパッケージの選び方

Riverpodのパッケージには3種類あります。

  1. riverpod
    https://pub.dev/packages/riverpod
  2. flutter_riverpod
    https://pub.dev/packages/flutter_riverpod
  3. hooks_riverpod
    https://pub.dev/packages/hooks_riverpod

1番目の riverpod は、
Flutterに関連するすべてのクラスが削除された、Dartのみのバージョンです。
通常、Flutterでのアプリ開発では選択しないと思いますので以降、言及しません。

2番目の flutter_riverpod は、
Flutterで Riverpod を使う上での基本的な利用方法です。

3番目の hooks_riverpod は、
後述の flutter_hooks を併せて使う方法です。
以下のいずれかに当てはまる場合は使用を検討すると良いかもしれません。

  • flutter_hooks パッケージをすでに使っている
  • flutter_hooks パッケージを導入してHooks機能を使う予定がある

flutter_hooks パッケージについては「Flutter Hooksとは」の章で補足・紹介します。

hooks_riverpodflutter_riverpod の書き方の違い

どちらのRiverpodパッケージをインストールしても、
基本的な書き方は変わりません。Riverpod v1.0 で記法の差異がなくなりました。

共通なProvider定義の書き方例:

app_name_provider.dart
final appNameProvider = Provider((ref) => 'Special App!');

WidgetでのProviderを読み取る時の書き方

Hooks機能を使用しないWidgetの場合は、パッケージに関係なく ConsumerWidget を使用できます。

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

// 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';

// 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}'),
        ),
      ),
    );
  }
}

ConsumerWidgetHookConsumerWidget に変更するだけです。

riverpodパッケージをインストールする

どの riverpod パッケージを使うか決めたら、以下のいずれかの方法でインストールしましょう。

  • VS Codeでコマンドパレット(⌘ + shift + p)から「Dart: Add Dependency」を選んで検索
  • Terminalで flutter pub add flutter_riverpod のようにコマンドを実行
  • 下記のように pubspec.yamldependencies 部分に追記し、 flutter pub get
pubspec.yaml
dependencies:
  # Flutterに依存しないDart only のプロジェクトで使う場合
  riverpod: {任意のバージョンを指定}

  # FlutterでRiverpodを使う場合
  flutter_riverpod: {任意のバージョンを指定}

  # Flutter Hooksを一緒に使う場合は、 `hooks_riverpod` に加えて `flutter_hooks` もお忘れなく
  flutter_hooks: {任意のバージョンを指定}
  hooks_riverpod: {任意のバージョンを指定}

Null-Safety未対応などの特別な理由がない限りは、導入時点での最新バージョンを指定するのが良いでしょう。
Null-Safetyに未対応のアプリプロジェクトで使用する場合は古いバージョンを指定する必要がありますが、riverpod系のパッケージでは、 0.12.4、 flutter_hooks は 0.15.0 が最後のNull Safety未対応バージョンとなっています。

これでアプリ内ファイルでRiverpodが使用できます。


次章では、「Riverpodの使い方」を解説します。