NotifierProviderについて

flutter

flutterにおいてRiverpodProviderを使用する機会が増えました。備忘録として今回は、NotifierProviderについてサクッとまとめました。

NotifierProviderについて

NotifierProvider とは

  • Notifierをリッスンして公開するために使用されるプロバイダ
  • 同期の状態とそれを操作するNotifierを提供するためのProvider
  • 非同期に初期化することができる Notifierは、AsyncNotifier

使用される場面

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を想定)

  1. riverpod_annotation のimport 分を記載
  2. part <ファイル名>.g.dart; とファイル名を書く
  3. @riverpod アノテーションを書く
  4. _$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);

最後に

まだまだ奥が深いProviderですので、追加、補足があれば更新します。
また別の種類のProviderについても記事にできればと思います。

ではまた。

コメント

タイトルとURLをコピーしました