【Flutter】NotifierProviderの使い方徹底解説！初心者向けシンプルガイド

Flutterの状態管理において、NotifierProviderは頻繁に使用されるProviderの一つです。
本記事では、NotifierProviderの基本概念から導入方法、使いどころまで詳しく解説します。

この記事でわかること
NotifierProviderについて
使用例
StateNotifierProviderの参考記事
最後に

この記事でわかること

NotifierProviderの基本
使用シーンと実装例
実際の導入手順とコード例

NotifierProviderについて

Riverpod公式の説明

NotifierProviderは、Notifierをリッスンし、公開するために使用されるプロバイダです
AsyncNotifierProvider は、AsyncNotifier をリッスンし、公開するために使用されるプロバイダです。
AsyncNotifier は、非同期に初期化できる Notifier です。

※DeepLにて翻訳(若干意図が違う可能性があるのでご注意を)

NotifierProvider is a provider that is used to listen to and expose a Notifier.
AsyncNotifierProvider is a provider that is used to listen to and expose an AsyncNotifier. AsyncNotifier is a Notifier that can be asynchronously initialized.

(Async)NotifierProvider | Riverpod

The content of this page may be outdated.

NotifierProvider とは

Notifierをリッスンして公開するために使用されるプロバイダ

同期の状態とそれを操作するNotifierを提供するためのProvider

非同期に初期化することができる Notifierは、AsyncNotifier

Notifierをリッスンするとは

「リッスンする」とは、Notifierが管理する状態の変化を監視することを意味します。
Notifier内の状態が更新されるたびに、その変化を検知して通知する機能が「リッスン」です。

例えば、カウントアップの機能でカウントが上がった際の変化をNotifierが管理・監視している。そういうイメージです。

使用される場面

Notifierの状態が変更されるたびに通知され、状態の変更に応じて同期的に値を更新することができるため、下記のようなパターンで使用されることが想定されます。

イベント処理後に時間の経過とともに状態（state）が変化する場合
ビジネスロジックを一箇所に集中させ、長期的な保守性を向上させたい場合

そもそもプロバイダとは

rivderpodとは、Flutterにおける状態管理をサポートするパッケージ

プロバイダとは、rivderpodの機能を実際に使用する際に使用するもの

使用例

簡単な使用例を詳細していきたいと思います。

バージョン

Flutter 3.10.4
Dart 3.0.3

ライブラリのインポート

Pubspec.yamlに必要なライブラリを記載しPub Getを実行します。
※バージョンは適宜調整してくださいmm

dependencies:
  flutter:
    sdk: flutter
hooks_riverpod: ^2.4.1
riverpod_generator: ^2.2.6
riverpod_annotation: ^2.1.4

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_runner: ^2.3.3

Riverpod Generatorの使用

下記4つのルール従って自分のやりたいことを書いていきます。
(今回はユーザー情報を管理するProviderを想定)

riverpod_annotation のimport 分を記載
part <ファイル名>.g.dart; とファイル名を書く
@riverpod アノテーションを書く
_$UserProviderのように_$〇〇と記載してextendsし、自分のやりたいことを書く

import 'package:riverpod_annotation/riverpod_annotation.dart'; // ①
part 'user_provider.g.dart'; // ②

@riverpod // ③
class User extends _$User {
  @override
  Users build() => Users(uid: '', email: '');

  // ユーザー情報を更新するメソッド
  void userUpdate(String uid, String email) {
    // こちらのUsersはfreezedで作成したもので説明は省略
    state = Users(uid: uid, email: email);
  }
}

Generatorの実行

Gernarorを実行しファイルを作成します。
ターミナルで以下を実施することで新しく〇〇.g.dartファイルが作成されます。

flutter pub run build_runner build

Providerの呼び出し

最後に使用したい場所で以下のような使い方ができるかなと思います。
（uid,emailを指定してユーザー情報を更新するようなイメージです）

user = ref.read(userProvider.notifier).userUpdate(uid, email);

StateNotifierProviderの参考記事

下記記事のRiverpodとの比較にてGeneratorを使用しないシンプルなStateNotifierProviderを使用した簡単な例を紹介しています。
比較として参考になりますのでよかったらご覧ください。

最後に

奥が深いProviderですので、追加、補足があれば更新します。
こちらはStateProviderを使用した参考アプリの記事です。よりProviderの理解が深まると思うのでぜひご覧ください。

他にもProviderについて深掘り記事をどんどん更新していけたらと思います。
ご指摘やご意見あればTwitterにてご意見いただければ幸いです。

ではまた。