FlutterのProviderまわりについて整理したい

これは何？

Flutterでアプリを作っているのですが、今まで自分はsetState + StatefulWidgetしか使っていませんでした。で、色々調べたら今はProviderを使うのが良い感じらしいことが分かりました。

そして、Providerについて色々調べていると、

• Provider
• ChangeNotifier
• ChangeNotifierProvider
• StateNotifier
• StateNotifierProvider

といった言葉が目に付きました。え、"Provider" だけでは状態管理は良い感じにならないの？？Providerはライブラリ？クラス？単体としての役目は何？？ってグチャグチャになってきたので一旦整理したいと思い書きました。

前提

バージョン

Flutter v1.12.13

言葉の整理

Provider

• InheritedWidgetを便利に使えるようにwrapしたもの
• 状態管理を特別いい感じに実装できるように作られたパッケージというわけではない
• providerというパッケージがあり、その中にProviderというクラスが存在する
  • provider | Flutter Package

ChangeNotifier

• 直訳すれば「変更を知らせる者」という通り、Listnerとかそこら辺の機能を持つクラス
• Providerと組み合わせるといい感じに状態管理を実装できる
  • 「View」と「状態&ロジック」を切り離すことができる
• これを利用するために外部ライブラリに依存する必要はない（Flutter内にある）
  • ChangeNotifier class - foundation library - Dart API

ChangeNotifierProvider

• ChangeNotifierのために作られたProviderの一種（クラス）
• providerパッケージの中に同梱されている

StateNotifier

• ChangeNotifierの進化版（詳しくはREADMEのMotivationを読もう😅）的な存在の抽象クラス
  • state_notifier/README.md at master · rrousselGit/state_notifier · GitHub
• なのでもちろん、Providerと組み合わせるといい感じに状態管理を実装できる
• 「View」と「状態」と「ロジック」を切り離すことができる
• これを利用するためにはstate_notifierに依存せねばならない
  • state_notifier | Dart Package

StateNotifierProvider

• StateNotifierのために作られたProviderの一種（抽象クラス）
• こちらはproviderパッケージの中には入っておらず、flutter_state_notifierパッケージに入っている
  • flutter_state_notifier | Flutter Package

まとめ

状態管理をいい感じにしたければ、ProviderとStateNotifier、そしてStateNotifierProviderを使っておけば良さそう。あとfreezedという奴もいるらしいがこれはまだ調べてない。

ChangeNotifierとStateNotifierを使った最小構成のサンプルを作ったのでよければ見てみてください。 こちらを見れば「View」と「状態&ロジック」になっているか、「View」と「状態」と「ロジック」と分かれているかがすぐわかると思います！

ChangeNotifierのサンプル

github.com

StateNotifierのサンプル

github.com