【個人開発】Flutterでリリースしたアプリの技術的まとめ
はじめに
2020年12月からFlutterを始め、約半年でアプリを２つリリースしました。今回はその２つに用いた技術についてのまとめです。
- スイングハック（骨格推定アプリ）
- ビアコレ（口コミアプリ）
スイングハック
これが初めてリリースしたアプリです。
スイングハックは骨格推定アプリです。撮影した動画を解析することで、ゴルフスイングで重要な前傾姿勢がキープできているか定量的に見ることができます。
詳しくは、下記にまとめているので参照ください。
ビアコレ
リリース第二弾のアプリです。FlutterWebで開発したものをiOS、Androidアプリに展開していきました。
ビアコレはクラフトビール専用の口コミアプリです。お気に入りのクラフトビールを見つけるためのサービスです。
サービスの内容をぎゅっとまとめた動画があるので、まずはご覧ください。
ちなみにビアコレはFlutter大学の共同開発から生まれました。僕がリーダーとしてプロジェクトを立ち上げ、３人で進めました。
1.クラフトビール特化の理由
現時点で日本のクラフトビールの種類は３０００以上あるので、それらをすべて飲んでお気に入りを見つけるのはかなり大変です。なので、日本中のクラフトビールの口コミや買える&飲める場所等が整理されたサービスには需要があるんじゃないかと思って開発をスタートしました。
加えて僕自身がクラフトビール好きであることも大事な理由です。
競合はUntappdだけで、英語のサービスなので実質ライバル無しです。
2.主な使用技術
- Flutter
- Firebase
- ColudFirestore
- Authentication
- Storage
- Hosting
- Analytics
- GCP
- Places API
- Maps JavaScript API
- Maps SDK for iOS
- Maps SDK for Android
3.設計
画面遷移図
Figmaを使って、ラフに画面遷移図を作りました。
データベース
取り組む前に簡単な作図をしました。Firestoreは柔軟なので、ところどころ最適化しながら進めました。
4.アーキテクチャ
いわゆるMVVMパターンを採用しました。
MVVMについては以下を参考にしてください。
5.FlutterWebからネイティブアプリへの移行について
技術的に難しいことは無いです。Web対応のライブラリはだいたいiOS/Androidも対応しているので問題なかったです。FlutterWebのコードをそのままネイティブで実行したらエラー祭りになると思いきや、ある程度動いたので逆にびっくりしました。
もちろん、認証の部分などはそれぞれ設定する必要があります。
変更点はNavigationロジックです。WebはNavigation2.0でネイティブはNavigation1.0で動かしています。Navigationについては以下記事を参考にしてください。
もともとはWebアプリとネイティブアプリのソースコードは共通化させようと思っていましたが、ネイティブであれもこれもと機能を付け足していったら共通化できなくなりました。
正確には、できない訳ではなく開発の進め方が下手くそなだけです。
6.使用したライブラリ
auto_route
これのおかげで、Webブラウザの戻るボタンで画面遷移できるようになりました。
flutter_riverpod
providerを使いまわせるのでめちゃ便利です。
google_maps_flutter
Googleマップを使うのに必要なライブラリ。
google_maps_webservice
GoogleマップをFlutter Webで使うのに必要なライブラリ。
location
Googleマップの現在地取得に使用しました。
geoflutterfire
デバイスに表示されている緯度経度の範囲の店舗情報を取得するのに使いました。
url_launcher
リンクをブラウザで開いてくれるライブラリです。
smooth_star_rating
レーダーチャートを表示してくれるライブラリです。いい感じのアニメーションを表示してくれますが、多用するとパフォーマンスが悪くなって、カクカクしはじめるので注意です。
google_sign_in
Googleログインを実装するのに使用しました。
sign_in_with_apple
Appleログインを実装するのに使用しました。
image_picker
端末から画像を取得するのに使用しました。
persistent_bottom_nav_bar
ネイティブアプリのボトムナビゲータを配置するときに使用しました。このライブラリを使えば、タブを変えてもページをキープしてくれます。
share
口コミを投稿した内容をSNSへシェアするためのライブラリです。
package_info
アプリのversionを管理するために使用しています。
参考にした記事
数えきれない記事のおかげでリリースできました。開発途中から参考リンクをメモしていたので、それをまとめています。
Discussion