はじめに
株式会社THIRD IT開発部でモバイルアプリ(Android及びiOS)の開発を行なっているエンジニアです。
Flutterは、クロスプラットフォーム開発の世界では注目の話題です。今回はFlutterの状態管理について纏めていきたいと思います。
状態管理とは
状態管理とは、1つ以上のユーザーインターフェイスコントロールの状態を管理することです。ユーザーインターフェイスには、テキストフィールド、ボタン、ラジオボタン、チェックボックス、ドロップダウン、トグル、フォームなどがあります。
アプリケーションは、数多のユーザーインターフェイスコントロールで構成されていて、1つのユーザーインターフェイスコントロールの状態は、他のユーザーインターフェイスコントロールの状態に依存します。
例:入力フィールドに有効な入力値がある場合、ボタンは有効な状態になり、入力フィールドが空または無効な値を持つ場合、ボタンは無効な状態になります。
アプリケーションが成長するにつれて、これは最も複雑な問題の1つになる可能性があります。そのため状態管理は、アプリケーション開発において非常に重要です。
アプリケーションの状態を管理するための状態管理手法を決定する必要があります。Flutterの状態管理は多数のパッケージが存在します。人気のあるものを紹介していこうと思います。
Provider
Providerパッケージは、InheritedWidgetをより再利用可能で使いやすくするためのラッパーです。このパッケージは、InheritedWidgetを使用して、より簡単な方法でデータを管理したい人に適しています。
長所
- InheritedWidgetをシンプルにする
- 広く利用されている
- Flutterチームによる開発サポート
各種リンク
Riverpod
Riverpodは、Providerと同じ作成者によるものであり、Providerの開発中に問題に直面したため、最初からInheritedWidgetを再実装したものです。
単方向のデータフローにより、パフォーマンス、テスト容易性、および可読性が向上します。コンパイル時にプログラミングエラーをキャッチし、開発者を実行時の例外から保護します。また、Riverpodは、プロバイダーで必要なBuildContextへの依存を排除します。
長所:
- Providerに似ています
各種リンク
- Official page:https://riverpod.dev
- pub.dev:https://pub.dev/packages/riverpod
- Github:https://github.com/rrousselGit/river_pod
Bloc
Blocは、人気のある状態管理ソリューションです。BLoCデザインパターンの実装に役立つ予測可能な状態管理ライブラリです。プレゼンテーションをビジネスロジックから簡単に分離できるようにし、テストと再利用を容易にすることができます。
長所:
- ビジネスロジックの分離がしやすい
- ドキュメントが多い
- テストしやすい
各種リンク
- Official page:https://bloclibrary.dev
- pub.dev:https://pub.dev/packages/bloc
- Github:https://github.com/felangel/bloc
GetX
GetXは、人気のある状態管理ソリューションです。 高性能の状態管理、インテリジェントな依存性注入、およびルート管理を迅速かつ実用的に組み合わせたものです。シンプルで非常に短いコードのために生産性が向上します。
長所:
- 非常に短いコード
各種リンク
- pub.dev:https://pub.dev/packages/get
- Github:https://github.com/jonataslaw/getx
States_Rebuilder
states_rebuilderは、依存性注入ソリューションと統合ルーターを組み合わせたFlutter状態管理であり、最高の状態管理エクスペリエンスを実現し、開発をスピードアップします。
各種リンク
- pub.dev:https://pub.dev/packages/states_rebuilder
- Github:https://github.com/GIfatahTH/states_rebuilder
Mobx
MobXは、アプリケーションのリアクティブデータをUIに簡単に接続できる状態管理ライブラリです。この配線は完全に自動化されており、とても自然な感じです。アプリケーション開発者は、2つの同期を維持することを心配することなく、UI(およびその他の場所)で消費する必要のあるリアクティブデータに純粋に焦点を合わせます。
各種リンク
- Official page:https://mobx.netlify.app
- pub.dev:https://pub.dev/packages/mobx
- Github:https://github.com/mobxjs/mobx.dart