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

image

はじめに

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

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

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

※状態とは、アプリの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〇〇〇を使います。 それぞれに適した使用場面があるので、それをまとめたものを表にしました。 1

Riverpod

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

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

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

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

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

2

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

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

StateNotifier

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

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

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

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

3

Consumer

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

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

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

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

まとめ

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

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

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

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

参考

[flutter_hooks]

[Riverpod]

[StateNotifier]

[Consumer]

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More

タグ

Flutter (108)初心者向け (28)イベント (18)Google Apps Script (15)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)デザイン (5)新卒 (4)就活 (4)vscode (4)Figma (4)Dart (4)JavaScript (4)お知らせ (4)FlutterWeb (3)Prisma (3)NestJS (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)設計 (2)線型計画法 (2)事例 (2)Git (2)Image (2)File (2)Material Design (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)Google (1)Web (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)DeepLeaning (1)深層学習 (1)Google Colab (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)permission_handler (1)flutter_local_notifications (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Firebase App Distribution (1)Fastlane (1)Dio (1)CustomClipper (1)ClipPath (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)docker (1)GithubActions (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More