はじめに
今回は、弊社ispecがFlutterのプロジェクトで採用しているパッケージを、ゆるく紹介していきます🍵
基盤
flutter_hooks
これがないと生きていけません🥺
flutter_hooksを採用することで、コードの重複削減や、ウィジェットのライフサイクル管理の簡潔化、宣言的かつ効率的な状態の管理ができます。これにより、読みやすく保守しやすいコードを促進でき、複雑な状態ロジックを扱う際の開発者の負担を軽減することができます！
また弊社は、Reactを使用するプロジェクトやメンバーが多いため、コーディングパターンをReactと似せることで、プラットフォーム間でのメンバーの移行をスムーズに行えるようにしています。
hooks_riverpod
APIからのデータの管理は、このあと登場するgraphql_codegenにより生成されたクラスで管理しているので、使用箇所は限定的です。フォームに入力された値の管理や、複数のウィジェット間でデータのやり取りが必要な箇所で使用しています。
API通信
graphql_flutter
弊社では、バックエンドとのやり取りはGraphQLを採用することがほとんどです。ウィジェットごとにFragmentを定義し、各画面ごとに必要なFragmentをQueryで束ねて定義しています。FragmentやQueryを定義するとgraphql_codegenにより、必要なクラスやhooksが生成されるため、とても効率的に開発をすることができています。
ストレージ
hive
現状は、セッションやリフレッシュトークンを保存しておくことが多いです。今後、GraphQLキャッシュの永続化にも使用して、ユーザ体験の向上を目指したいと考えています。
ナビゲーション
go_router
他にも選択肢はいくつかあるのですが、Flutter公式パッケージになったのが、採用する大きな理由です。
レイアウト・デザイン
gap
多くの会社さんで採用されているのかなと思います。 短く簡単に書けるのが良いですよね。
flutter_svg
google_fonts
便利系
collection
Dart標準だと冗長なコードになってしまう配列の操作等がスッキリかけるので、採用しています！
js
for Webで独自にjsを書かないと対応できない機能を開発する際に使用しています。
先日出したfor Webでのプッシュ通知実装の際にも使用しています。
エラーロギング
sentry_flutter
全社的に、Sentryを採用してエラーの監視を行っています。
Linter
pedantic_mono
弊社ではこのルールをベースに、プロジェクトごとにカスタマイズしています。
flutter_hooks_lint_plugin
さいごに
後日、弊社が公開しているテンプレート群「Starry」に、Flutterのプロジェクトも追加予定です！
その際には、今回ご紹介したパッケージに加えて、アーキテクチャやテストについてもご紹介できればと思います！
それでは、良いお年を〜！🎍
Discussion