FlutterでRiverpodの初期設定の方法

Flutterの状態管理の定番である「riverpod」。
今回は自分のプロジェクトに導入するタイミングがあったので、初期設定を備忘録的に書いてみました。

公式サイトを見ればわかる人にはわかるかと思います。
そんな方は公式サイトのチュートリアルをどうぞ！

今回は実際に私がプロジェクトに導入した時の手順と、簡単なriverpodの例を作成してみたのでよろしければ読んでみて下さい。

Riverpod関連のパッケージをインストールする

flutter pub add hooks_riverpod
flutter pub add flutter_hooks
flutter pub add riverpod_annotation
flutter pub add dev:riverpod_generator
flutter pub add dev:build_runner
flutter pub add dev:custom_lint
flutter pub add dev:riverpod_lint

まずは必要なパッケージをインストールしていきます。
他のパッケージで使用しているものもあるかもしれませんが、一応公式サイトに合わせて全て実行しておきます。

analysis_options.yamlにコードを追加

analysis_options.yamlがルートディレクトリにありますので、以下のコードを追加します。

analyzer:
  plugins:
    - custom_lint

プロジェクト全体にRiverpodを適用する

import 'package:hooks_riverpod/hooks_riverpod.dart';

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

ここではRiverpodを適用させたい範囲の一番上位に「ProviderScope」で囲んであげる必要性があります。

今回はアプリケーション全体で適用したいので、エントリーポイントであるmain.dartに設定しました。
もしプロジェクトの一部で適用したい場合などは、それを囲むように設定してあげればOKです。

実際にRiverpodを使うまでの流れ

初期設定がここまでで完了しているので、Riverpodが動いているかを確認してみます。

Riverpodのファイルを作成する

まず最初にriverpodのファイルを作成します。
ファイル自体の場所はどこでも良いのですが、個人的には必要なウィジェットのもっと上位のところにproviderと言うディレクトリを作ってまとめておくようにはしています。

今回はサンプルなので「Example」と言うクラスを作成します。

import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'example_test.g.dart';

@riverpod
class ExampleTest extends _$ExampleTest {
  @override
  String build() {
    return 'example';
  }
}

ファイル名

ファイル名はproviderに使用したい名前を設定します。
名前はdartのルールに沿ってスネークケース(小文字と"_"で繋いだもの)にします。

class名

class名をアッパーキャメルケース(最初の文字と、文章の繋ぎ部分を大文字にしたもの)で書きます。今回はclass名を"ExampleTest"にしています。
このファイルを元にファイルが作成され、「exampleProvider」が生成されるようになっています。

extendsの部分にも"_$ExampleTest"とあるのですが、「_$」の後にclass名を記述します。

part 'example_test.g.dart';

3行目にある上記コードも必要になるので、忘れないように注意しましょう。

自動生成されるファイル名となるので、元のファイル名と同じにする必要があります。

build関数

returnする値がriverpodで状態管理する値となっています。

今回であれば単純に"example"と言う文字列を管理する形になります。

Riverpodをbuilderで生成する

dart run build_runner build

上記コマンドを実行することで、riverpodのファイルが生成されて、実際のウィジェット上でriverpodが使えるようになります。
"exampleTestProveder"が生成されて、使用可能となります。

実際にコード上で使用する

class Test extends StatelessWidget {
  const Test({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer(builder: (context, ref, _) {
      final sample = ref.watch(exampleTestProvider);
      return Text(sample);
    });
  }
}

実装自体には2つの方法があるのですが、今回は通常の方法で書いておきます。

これでTestウィジェットを使用したときに、ちゃんと「example」と言う文字が出力されたら成功です。