Chapter 04

[v0.14.0以下版] Riverpodの選び方とインストール

村松龍之介
村松龍之介
2023.02.12に更新
このチャプターの目次
  1. インストールするべきパッケージの選び方
  2. hooks_riverpod と flutter_riverpod の書き方の違い
    1. WidgetでProviderを読み取りたいときの書き方
  3. pubspec.yamlに追記し、 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でのアプリ開発では選択しないと思いますので以降、言及しません。

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

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

  • flutter_hooks パッケージをすでに使っている
  • flutter_hooks を使う予定がある
  • より簡潔な構文が好き
  • 状態を watch するときに select 構文を使ってパフォーマンスを高めたい

hooks_riverpod と flutter_riverpod の書き方の違い

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

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のものがそのまま使えます（引数に違いなし）
  @override
  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` が追加されます。
  @override
  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.yaml の dependencies 部分に追記します。

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

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

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