Chapter 05無料公開

Riverpodの選び方とインストール

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

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

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 を使う予定がある
  • より簡潔な構文が好き
  • 状態を watch するときに select 構文を使ってパフォーマンスを高めたい

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

hooks_riverpodflutter_riverpod の書き方の違い

どちらのRiverpodパッケージをインストールするかによって、Widgetからの利用時に書き方の違いがあります。

グローバル変数としてのProvider定義の書き方は共通です。
例:

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

WidgetでProviderを読み取りたいときの書き方

hooks_riverpod の場合

hooks_riverpod の場合は HookWidget が使用できます。
HookWidgetの書き方は以下のようになります。

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
// HookWidgetを使用するために、 `flutter_hooks` のimportが必要です。
import 'package:flutter_hooks/flutter_hooks.dart';

// StatelessWidgetの代わりに `HookWidget` を使用します。
class MyApp extends HookWidget {
  // `HookWidget` では、 buildメソッドはStatelessWidgetのものがそのまま使えます(引数に違いなし)
  
  Widget build(BuildContext context) {
    // `useProvider` を使用して Providerを読み取ります。
    final value = useProvider(appNameProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Example')),
        body: Center(
          // Providerから読み取った値を使用
          child: Text(value),
        ),
      ),
    );
  }
}

flutter_riverpod の場合

flutter_riverpod の場合は ConsumerWidget を使用します。

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

// StatelessWidgetの代わりに `ConsumerWidget ` を使用します。
class MyApp extends ConsumerWidget {
  // `ConsumerWidget` では、buildメソッドの引数に
  // `ScopedReader watch` が追加されます。
  
  Widget build(BuildContext context, ScopedReader watch) {
    // `watch` を使用して Providerを読み取ります。
    final String value = watch(appNameProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Example')),
        body: Center(
          // Providerから読み取った値を使用
          child: Text(value),
        ),
      ),
    );
  }
}

pubspec.yamlに追記し、 riverpodをインストールする

どの riverpod パッケージを使うか決めたら pubspec.yamldependencies 部分に追記します。

pubspec.yaml
dependencies:
  # Flutterに依存しないDart only のプロジェクトで使う場合
  riverpod: ^0.14.0+1

  # FlutterでRiverpodを使う場合
  flutter_riverpod: ^0.14.0+1

  # Flutter Hooksを一緒に使う場合は、 `hooks_riverpod` に加えて `flutter_hooks` もお忘れなく
  flutter_hooks: ^0.16.0
  hooks_riverpod: ^0.14.0+1

各パッケージのバージョン指定は、2021年4月17日現在の最新バージョンで書いてあります。
Null-Safety未対応などの特別な理由がない限りは、導入時点での最新バージョンを指定するのが良いでしょう。

Null-Safetyに未対応のアプリプロジェクトで使用する場合は古いバージョンを指定する必要がありますが、riverpod系のパッケージでは、 0.12.4、 flutter_hooks は 0.15.0 が最後のNull Safety未対応バージョンとなっています。

pubspec.yaml ファイルを書き換えたら、 flutter pub get を実行して、パッケージをインストールしましょう!
これでアプリ内ファイルでRiverpodが使用できるようになりました。


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