どうも、株式会社YOUTRUSTのアプリ開発のリードエンジニアをやっているashdikこと朝日(YOUTRUST / X)です。
最近は、任天堂Switchで有名な「Slay the Spire」のボードゲーム版にどハマりしております。
僕は一人で、協力しています。
...あれ、目から汗が。
⚓️ 概要
気を取り直して、今回と次の記事では弊アプリで使っているパッケージとその用途を一挙にご紹介します。
中規模以上のアプリでどんなパッケージがどんな風に使われているか、何か参考になるものがあると嬉しいです！
それでは、いってみましょー！
💻 筆者環境 (執筆時)
| name | version |
|---|---|
| Flutter | 3.24.1 |
| Dart | 3.5.1 |
🍁 パッケージ説明
🐦🔥 Firebase系
変わったものは使ってないので割愛しますｗ
🎯 メタ情報系
package_info_plus
パッケージ情報を取得し、強制アプデが必要かバージョン比較する際に使っています。
pub_semver
セマンティックバージョンを扱うためのパッケージです。
print(Version.parse('1.0.0') < Version.parse('2.0.0')); // true
device_info_plus
主に、Androidに関する制御をする時に利用しています。
👍 Better Code
analyzer
コードの静的解析用のパッケージですね。
json_serializable
json を扱うためのパッケージです。 fromJson/toJson の出力に必要なパッケージです。
json_annotation
@JsonKey などのアノテーションを提供するパッケージです。
freezed_annotation
@freezed を提供するパッケージです。
🌄 For image
flutter_svg
SVG画像を表示するために使います。
後述する flutter_gen と共に以下の様な使い方をしています。
Assets.icons.app.logo.svg()
cached_network_image
ネットワーク経由で取得した画像データをキャッシュするためのクラスです。
// Before Image.network('image_path') // After CachedNetworkImage(imageUrl: 'image_path')
image_gallery_saver
画像を端末に保存する時に利用しています。
✂️ For UI
intl
ローカライズ用に使っています。
主に、DateFormat 系が多い様に思います。
flutter_cached_pdfview
PDFを表示する際に、利用しています。
custom_refresh_indicator
PullToRefresh のくるくるをカスタマイズするために利用しています。
shimmer
ローディング中のシマーを表現するためのパッケージです。 何個かありましたが、これがシンプルそうだったので選択しています。
利用する際は、一段階ラップして以下のように使っています。
// Shimmeringクラス class Shimmering extends StatelessWidget { factory Shimmering.circle(...) {} factory Shimmering.box(...) {} factory Shimmering.rect(...) {} } // 利用時 Column( children: [ Shimmering.box( width: 180, height: 20, ), // 余白 Shimmering.box( width: 350, height: 20, ), ], )
flutter_slidable
セルUIをスライドしてメニュー項目を表示するためのパッケージです。 (サンプル画像を載せたかったのですが、あまりにも分かりづらすぎて断念しました。)
showcaseview
オンボーディング時に、一時的な利用ケースを表示する際などに利用しています。
nested_scroll_view_plus
最初は、 NestedScrollView を使っていたのですが、少しカクつく問題があり、それを解消するために使っています。
another_flushbar
アプリ内でToastの様なフィードバックを表示するためのコンポーネントを 統一したく利用していました。
emojis
メッセージ内で、絵文字かどうか判定する際に利用しています。 絵文字のみの場合に文字サイズを大きくしています。
👣 For logging
logging
ログをレベル別で表現するためのパッケージです。
visibility_detector
特定のコンポーネントが画面に表示されたときにログを送信する、といった挙動を実現するためのパッケージです。
VisibilityDetector( key: ValueKey('some_id'), onVisibilityChanged: (info) { if (info.visibleFraction > 0.01) { // childの1%が見えたら... } }, child: ... ),
🕸️ For web
flutter_inappwebview
ウェブコンテンツを表示するために使っています。
http_parser
メッセージにて、特定の拡張子を判定するために使っています。
MediaType? detect(String fileName) { return switch(p.extension(fileName) {// pathパッケージより '.jpg' || '.jpeg' => MediaType.parse('image/jpeg'), ... _ => null; }; }
🛜 API Request
dio
HTTPクライアントで、APIリクエストを送信する際に利用しています。
YOUTRUSTアプリを支えるAPIリクエストの仕組み - YOUTRUST Tech Blog
dio vs httpみたいな構図がありますが、周りの話を聞いているとdioを使う人が多いように思います。
👖 Web Socket
web_socket_channel
WebSocketを利用するためのパッケージです。
🍉 State Management
flutter_hooks
useXxx 系のメソッドや HookWidget などを提供するパッケージです。
いずれ、useXxx 系のメソッドをまとめた記事を書きたいなと思っていたりします。
hooks_riverpod
HookConsumerWidget などを提供するパッケージです。
これなしには生きられない体になってしまいました。
riverpod_annotation
@riverpod アノテーションを利用可能にするためのパッケージです。
🔗 Social
flutter_facebook_auth
Facebook 連携を行うためのパッケージです。
sign_in_with_apple
Sign in with Apple を行うためのインタフェースを提供してくれるパッケージです。
google_sign_in
Google サインインを提供するためのパッケージです。
🍎 Native Feature
flutter_keyboard_visibility
キーボードの表示/非表示をフックに描画する事が出来る様になったりします。
image_picker
カメラかライブラリかを表すImageSource、取得したファイルを扱うXFile、
ピッカーを制御する ImagePicker などのクラスを提供します。
image_cropper
プロフィール画像を切り抜きするために使っています。
url_launcher
URLをアプリ内外のブラウザで開いたりする際に利用します。 ちなみに、YOUTRUSTドメインのリンクは、アプリ内のページに遷移するように別の制御を入れています。
flutter_app_badger
アプリのバッジの表示/非表示を制御するためのパッケージです。 通知の許可確認ダイアログを出すところまでやってくれます。
shared_preferences
端末に情報を保持するためのパッケージです。 投稿途中の文言を保存したり、さまざまなデータを保管していたりします。
in_app_review
ネイティブで用意されている、レビュー促進ダイアログを表示するためのパッケージです。
share_plus
ネイティブの共有シートを利用するために使っています。
uni_links
Universal Linkを扱うためのインタフェースを提供します。
app_tracking_transparency
App Tracking Transparency用のパッケージです。
📁 ファイル操作系
glob
ファイルやディレクトリの操作をやりやすくするためのクラスを提供します。
前述の import_linter と組み合わせて使っています。
path
パスの操作をやりやすくするためのパッケージです。 ディレクトリやファイル名からパスを生成するといった用途などに使用します。
🎥 最後に
開発用に使っている残りのパッケージなどは、その2の記事で解説したいと思います。
皆様のパッケージ選びの参考になれば幸いです。
また、YOUTRUSTでは、エンジニアを募集しています！
YOUTRUSTにほんの少しでも興味を持っていただけた方は、下のリンクよりご応募お待ちしておりまっす！
ちょっと話聞いてみたいかも？くらいの温度感でOKです。
