Chapter 05無料公開

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

村松龍之介
村松龍之介
2023.02.23に更新
このチャプターの目次
  1. インストールするべきパッケージの選び方
  2. hooks_riverpod と flutter_riverpod の書き方の違い
    1. WidgetでのProviderを読み取る時の書き方
    2. Riverpod と Hooks機能を合わせて使う場合
  3. riverpodパッケージをインストールする

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

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でのアプリ開発では選択しないと思いますが、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` が追加されます。
  @override
  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` が追加され、使い方も一緒です。
  @override
  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の使い方」を解説します。