【Flutter】RiverpodのStateproviderについてと簡単な状態管理アプリの参考例

Riverpodの理解を深めるべく、基本となるStateProviderについて解説しました。基礎的なことを学びたい、学び直したい方は是非ご覧ください。

注意
RiverpodにおけるStateProviderの基礎
1. StateProviderとは
2. メリット
使用例
最後に

注意

はじめに注意として公式ににもあるように、すでに古くなった使用方法のため、公式に従うならGeneratorや.gファイルを使ったRiverpodのState管理がおすすめです。

The content of this page may be outdated.

Providers | Riverpod

The content of this page may be outdated.

ジェネレーターを使った最新のパターンのProviderの使い方については下記を参考ください。

RiverpodにおけるStateProviderの基礎

StateProviderとは

状態を管理するRiverpodのProviderの一つ
カウントアップや文字列の状態管理などに向いている
- 複雑な状態管理は別のProviderで対応がベター

メリット

複数の場所にある状態を管理できる
- 1対1ならStatefulやHooksなどで上等

使用例

カウントを管理する簡単なアプリにStateProviderを使用した実際の例になります。

Providerスコープ

お作法として、Providerを使用する際は、ProviderScopeをrunApp配下で自分のアプリにラップする必要があります。

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

定義

プロバイダーは基本、Widget等の外でグローバルに定義する

final countStateProvider = StateProvider<int>((ref) => 0);

ただどこからでも呼べる状態なため、下記ポイントには注意が必要

設計ルールを決めずに使うと、この値どこで誰が変えているのとなる
細かくStateProviderにしているとロジックが散らかりやすい

実際にStateProvierを呼び出す

build関数の中でref.watchを呼び、プロバイダーを定義します。

今回は、ボタンが押したら、stateの状態を変化させるためにreadで呼び出し、カウントアップ（インクリメント）を定義します。

  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(countStateProvider);
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
                onPressed: () {
                  ref.read(countStateProvider.notifier).state++;
                },
                child: const Text('Increment')),
            Text('Count: $count'),
          ],
        ),
      ),
    );
  }

最後に

簡単にRiverpodのStateProviderについて説明と使用例について書いてみました。これからRiverpodの理解を深めるべく、別のProviderや状態管理のお作法等についても発信していきたいと思います。

コメント等あればお気軽にXにてご連絡ください。
ではまた。