概要
リンクウェルのクリフォアアプリはFlutterで作られたモバイルアプリです。
今回はpubspec.yamlで導入しているFlutterパッケージを紹介します。Flutter開発でのパッケージ選定の参考にどうぞ。
通信
graphql_flutter
バックエンドとの通信はGraphQLを採用しており、GraphQLを簡潔に利用するためのクライアント用のパッケージです。外部のサービスに対してはREST APIも使用します。
画面遷移・状態管理
auto_route
ルーティングパッケージの一つで、画面遷移を一元管理しページ遷移を簡単に実現します。Navigatorを用いた標準的なナビゲーションと比べて、ルーティングのコードが自動生成されたり、ネストされた子ページの管理が簡単になっています。また、app_linksパッケージと組み合わせてディープリンクによる自由な画面遷移も実現できます。
ルーティングパッケージにはgo_routerもありますが、auto_routeはルーティングの自動生成に対応していたことやAutoRouteGuardにより簡潔に遷移の条件判定が記述できたことから採用しました。
hooks_riverpod & riverpod_annotation
クリフォアアプリでの状態管理はRiverpodを利用していますが、HooksWidgetやHookConsumerWidgetなど、Riverpodとhooksの両方を使用したいために導入しています。
flutter_hooks
HooksWidgetなどのhooksの機能を使えるようにします。Riverpodと連携するような処理ではConsumerWidgetを使用していますが、単一の画面内の状態管理にはHooksWidgetを利用するようにしています。
freezed & freezed_annotation
イミュータブルなデータクラスを自動生成します。データクラスの定義を行うことでコンストラクタ、オペレーター、Jsonシリアライザなどが自動実装されます。また、Riverpodとの相性がよく、効率的かつ安全にアプリ内の状態管理が行えます。Stateの定義でよく利用します。
UI
convex_bottom_bar
画面下部に表示されているようなナビゲーションバーを提供します。標準ではBottomNavigationBar Widgetがありますが、それに比べてconvex_bottom_barは選択状態のデザインがわかりやすく、ナビゲーションの実装もシンプルに行えます。サンプルのデザインがアプリの目指すデザインに近く、タブ機能の実装が簡単なため導入しました。
custom_sliding_segmented_control
タブのUIと機能を提供します。標準のTabBarと比べてタブ切り替え時のアニメーションが最初からついており、Widget単体でスライド操作によるタブの切り替えができます。
smooth_page_indicator
ページインジケーターを実現します。複数のコンテンツを横にスクロールするようなカルーセルとともに使用します。
fl_chart
様々なグラフを表示します。クリフォアアプリでは体重の推移を折れ線グラフで表示しています。
flutter_svg
画像表示において、PNGやJPEGといったラスター形式ではなくベクター形式のSVGをサポートします。ベクター形式のほうが画像サイズの変更に強いため、複数の端末サイズをサポートする便利です。使い方は標準のImage Widgetと近く、Image.asset(パス)の代わりにSvgPicture.asset(パス)にするだけです。
gap
Widget間の間隔を効率的に調整できます。標準WidgetのSizedBoxではwidthやheightを都度指定しますが、Gap Widgetはレイアウトを自動で推測してくれるので数値を入れるだけで間隔を制御できます。標準Widgetとして欲しい機能の一つです。
SizedBoxでの実装
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Widget 1"),
SizedBox(height: 16), // heightを指定しなければならない
Text("Widget 2"),
],
)
Gapの実装
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("First Widget"),
Gap(16), // Columnを使用しているので自動でheight指定になる
Text("Second Widget"),
],
)
flutter_markdown
Markdown形式のテキストをパースし、最適なWidgetに変換して表示します。お知らせページなどのアプリ外から渡されたテキストを元に動的コンテンツが変わる画面で使用しています。画像の表示やリンク機能にも対応しています。
flutter_native_splash
アプリ起動時の画面（スプラッシュ画面）を生成します。アプリのロゴを表示しています。
syncfusion_flutter_pdfviewer
PDFファイルをWidgetとして表示します。端末内のファイルだけでなくURLを指定したネットワーク上のPDF表示にも対応しています。
webview_flutter & webview_flutter_android
アプリ内Webビューの実装のため導入しています。Android固有の不具合が発生したためwebview_flutter_androidはバージョンを別途指定して入れています。
app_badge_plus
Push通知などで表示されるアプリのバッジ管理です。ただし、以前に意図せずにバッチが付いてしまう不具合があり、その不具合の回避のために導入しました。
cached_network_image
ネットワーク経由で画像を取得し、さらにキャッシュさせて効率よく管理してくれます。
導入や使い方も簡単で、標準のImage.networkと同じように使用できます。一時的な表示にはImage.networkを使用し、端末内に保存し再利用したいケースではcached_network_imageを利用します。
広告・分析・トラッキング
adjust_sdk
Adjustサービスと連携するためのFlutter SDKです。広告の効果測定やインストール後のユーザーの行動をトラッキングに使用しています。
amplitude_flutter
ユーザーの行動分析にAmplitudeを使用しており、そのためのFlutter SDKです。
クリフォアアプリでは100件以上のトラッカーイベントを使用しており、ユーザーの操作から行動分析が行えるようにしています。
sentry_flutter
エラートラッキングサービスとしてSentry使用しており、そのためのFlutter SDKです。
アプリのクラッシュだけでなく、アプリで発生した例外を全て取得しており、Slackでも通知させています。これにより本番環境での不具合の早期発見につながっています。
AmplitudeとSentryはアプリだけでなくバックエンドや、リンクウェルのWebサービスでも活用しています。
Firebase
Firebase関連のパッケージについてまとめて紹介します。
firebase_core
Firebaseのコア機能で他のFirebaseサービスを使うため必須のパッケージです。
firebase_remote_config
アプリ内の設定や値をサーバーレスで変更できます。強制アップデートのバージョン指定など、アプリバージョンに関する操作やメンテナンス管理などに使用しています。
firebase_messaging
プッシュ通知機能のためのパッケージです。
firebase_performance
アプリのパフォーマンス計測に使用しており、主にアプリの起動時間をトラッキングしています。
ネイティブ連携
app_links
アプリ内でのディープリンクやユニバーサルリンクを実現するためのパッケージです。アプリ外からパスを指定してアプリ内の画面に遷移させるために使用しています。
Firebase Dynamic Linksにも同様の機能がありましたが、今後廃止されることからこのパッケージに移行しました。
app_settings
アプリ内から端末の設定画面に遷移させます。プッシュ通知やカメラの権限などの使用にはユーザーの許可が必要なため、設定画面をスムーズに開けるようにしてます。
また、AndroidとiOSでは遷移先の設定が異なる場合があるため、OSごとに指定してします。
permission_handler
プッシュ通知やカメラなどの各種権限を管理します。app_settingsと組み合わせて使われます。
flutter_local_notifications
ローカル通知を実装できるパッケージです。Androidにおいて、アプリ起動中に届いたPush通知を画面の上部に出すために使用しています。
health
iOSのApple HealthやAndroidのGoogle Fitといった健康管理システムと連携します。OSの差異を気にせずにデータが取得できます。クリフォアアプリでは体重データの取得に活用しています。
device_info_plus
iOSやAndroidのOSにアクセスし、OSバージョンやAndroid SDKのバージョンを取得しています。
また、ヘルスプラグインや分析ツールなどの外部のパッケージもdevice_info_plusに依存しているため必須のプラグインとなっています。
package_info_plus
アプリのバージョン情報を取得します。
device_info_plusは端末固有の情報を、package_info_plusはアプリ自身の情報をそれぞれ取得します。
version
アプリバージョンに関するユーティリティライブラリです。バージョン番号の比較やパースが行えます。
shared_preferences
アプリ内にデータを保存するローカルキャッシュ実現します。ネイティブ固有の機能のラッパーとなっており、OSの差異を気にせずに利用できます。
keep_screen_on
時間経過による画面の自動オフを無効化します。クリフォアアプリにはビデオチャット機能があり、ビデオ診療中に端末の画面が勝手に消えてしまわないようにしています。
ファイルユーティリティ
file_picker
端末内に保存されたファイルの選択機能を実現します。複数選択やファイルタイプでのフィルタリングができます。
file_saver
ダウンロードしたファイルをデバイスに保存します。バイトデータの保存だけでなく、URLを元にしたファイルダウンロードによる保存もサポートしています。
image_picker
アプリ内での画像選択を実現します。保険証の撮影や患部写真の選択に使われます。
その他
collection
Dartの標準実装にはないリスト操作を提供します。Dart3から多くのリスト操作メソッドが実装されましたが、firstWhereOrNullなど、一部メソッドは未実装なため導入しています。
dartx
Dart言語に便利な拡張メソッドを追加します。主にisNullOrEmptyやtoIntなどの文字列に対する操作で利用しています。
intl
多言語対応における日付や数値のフォーマットをサポートします。現在クリフォアアプリは国内限定の利用であり、多言語対応は行なっていませんが、DateFormat型のような日付に関する計算や管理のために導入しています。
path
パス操作のユーティリティパッケージです。
path_provider
デバイス上のディレクトリパスを取得します。path_providerで取得したパスをpathパッケージで操作します。
url_launcher
アプリ内から外部のWebページへの遷移や、メールなどの他のアプリケーションが開ます。Webページの遷移は外部のブラウザだけでなく、WebView上での表示も可能です。
まとめ
今回はリンクウェルのクリフォアアプリで使われるFlutterのパッケージについて紹介しました。
Flutterには公式パッケージリポジトリのpub.devがあり、必要なパッケージが探しやすくなっています。一方でメジャーなパッケージの判断や、パッケージの良し悪しは使用例がないとわからないケースも多いため、今回の紹介が参考となれば幸いです。
Discussion