Flutterで状態管理などでよく使うパッケージについて調べてみた

はじめに

　普段、Flutterを業務等で使っていく中で状態管理をする必要が出てくると思います。状態管理をする上で最近では、Riverpodやflutter_hooks、StateNotifier、freezedを使うことが多いのではないでしょうか。

　私自身、状態管理をするために普段何となく使っているパッケージでも意外と人に説明しようとした時にどう説明すれば良いのか分からずに詰まってしまうと言う経験をしました。

　そこで今回の記事では、なんとなく使っているけどブラックボックス化(理解をあやふやに)してしまっているパッケージについて調べたことをまとめていきます。

※状態とは、アプリのUIを構築するデータのことを言います。

flutter_hooks

まずはhooks_riverpodとよく使われるflutter_hooksについて紹介します。

flutter_hooksの特徴は以下の点です。

• flutter_hooksはUIの状態管理をサポートするライブラリ
• 特定のページ内でしか使わないStateの管理に向いている
• グローバルにStateを管理したい場合はRiverpodが向いている
• State情報へのアクセスが非常にしやすい

このようにflutter_hooksはグローバルではなく、特定のページでのみ使うStateの管理によく使われます。そのため、使うページのbuild内でStateを定義することによってState情報へのアクセスがグローバルで定義したStateよりもアクセスがしやすくなります。

flutter_hooksを使うにあたって、use〇〇〇を使います。 それぞれに適した使用場面があるので、それをまとめたものを表にしました。

Riverpod

次は、Providerの上位互換や良い所取りをしたパッケージと言われているRiverpodについて紹介していきます。

Riverpodの特徴は以下の点です。

• Flutterにおける状態管理をサポートするパッケージ
• 使われなくなったStateをautoDiposeで自動で破棄できる
• 同じ型で複数のProviderを使える
• Providerをグローバルに利用できる
• 複数の場所から簡単にStateにアクセスできる

このようにRiverpodを使うことによって、Stateをグローバルに定義することができるため大規模なアプリでも容易にStateを渡すことができるようになります。

Riverpodを使うにあたって、使うライブラリの選択肢はいくつかあります。その選択肢の決め方は以下のようにする説明をよく見かけるので、紹介します。

• flutter_riverpod：FlutterでRiverpodを使うための基本機能が提供される
• hooks_riverpod：flutter_hooksとRiverpodの両方を使用する想定で作られている
• riverpod：Dartパッケージ(Dartのみで動くため、Flutterに対応していない)

※個人的には、hooks_riverpodをよく使っております。

StateNotifier

次に紹介するのはStateNotifierについてです。StateNotifierは主にStateを一つしか持つことができないため、複数のStateを管理したい場合は、オブジェクトを作成して管理することになります。そのため、freezedとよく使われるパッケージです。

StateNotifierの特徴は以下の点です。

• 一つのStateを保持し、その値の変更を通知するValueNotifierの拡張版のようなクラス
• Riverpodとfreezedと合わせてよく使う
• StateNotifierクラス：状態管理クラスが継承するクラス
• StateNotifierProviderクラス：状態管理クラスを注入するクラス

StateNotifierについて自分なりにまとめてみたのが以下の図です。

Consumer

最後はConsumerについて紹介していきます。

Consumerの特徴は以下の点です。

• ref.watch()で状態の値の変更を監視し、変更に応じてWidgetを再描画する
• Stateの値が変更された時に、再度buildする範囲を絞るためのWidget
• buildメソッド内でref.watch()を定義してしまうと状態が変化するたびにWidgetが丸ごと再描画されてしまう

このように、Consumerを使うことによって再描画される範囲を限定することができるため、再描画する必要のないところのbuildを抑制することができ、アプリのパフォーマンス向上にもつなげることができます。

まとめ

いかがだったでしょうか？

普段何気なく使っているパッケージでも、意外と理解があやふやだった部分もあるのではないでしょうか？

この記事を書くことを通して、自分自身のパッケージに関する理解を深めることができたので、誰かのお役に立てればと思っております。

自分自身エンジニアとしてはまだまだ未熟なので、今回の記事で間違っている部分や知見などがございましたらTwitterのDMでコメントして頂けるとありがたいです。

参考

[flutter_hooks]

• https://zenn.dev/manabu/articles/bae5d5ded78cbc
• https://kimuralog.com/?p=1941

[Riverpod]

• https://kimuralog.com/?p=1930
• https://zenn.dev/riscait/books/flutter-riverpod-practical-introduction/viewer/what-is-riverpod

[StateNotifier]

• https://www.ariseanalytics.com/activities/report/20210625/
• https://zenn.dev/heyhey1028/articles/f0348450037471

[Consumer]

• https://blog.dalt.me/1815
• https://blog.dalt.me/1903