🌍

【個人開発】Flutterでリリースしたアプリの技術的まとめ

4 min read

はじめに

2020年12月からFlutterを始め、約半年でアプリを2つリリースしました。今回はその2つに用いた技術についてのまとめです。

  • スイングハック(骨格推定アプリ)
  • ビアコレ(口コミアプリ)

スイングハック

これが初めてリリースしたアプリです。

iOSアプリ

Androidアプリ

スイングハックは骨格推定アプリです。撮影した動画を解析することで、ゴルフスイングで重要な前傾姿勢がキープできているか定量的に見ることができます。

詳しくは、下記にまとめているので参照ください。

https://matsumarudesu.com/flutter-golf-app-release-architecture/

ビアコレ

リリース第二弾のアプリです。FlutterWebで開発したものをiOS、Androidアプリに展開していきました。

Webアプリ

iOSアプリ

Androidアプリ

ビアコレはクラフトビール専用の口コミアプリです。お気に入りのクラフトビールを見つけるためのサービスです。
サービスの内容をぎゅっとまとめた動画があるので、まずはご覧ください。

ちなみにビアコレはFlutter大学の共同開発から生まれました。僕がリーダーとしてプロジェクトを立ち上げ、3人で進めました。

1.クラフトビール特化の理由

現時点で日本のクラフトビールの種類は3000以上あるので、それらをすべて飲んでお気に入りを見つけるのはかなり大変です。なので、日本中のクラフトビールの口コミや買える&飲める場所等が整理されたサービスには需要があるんじゃないかと思って開発をスタートしました。

加えて僕自身がクラフトビール好きであることも大事な理由です。

競合は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については以下を参考にしてください。

https://wasabeef.medium.com/flutter-を-mvvm-で実装する-861c5dbcc565

5.FlutterWebからネイティブアプリへの移行について

技術的に難しいことは無いです。Web対応のライブラリはだいたいiOS/Androidも対応しているので問題なかったです。FlutterWebのコードをそのままネイティブで実行したらエラー祭りになると思いきや、ある程度動いたので逆にびっくりしました。

もちろん、認証の部分などはそれぞれ設定する必要があります。

変更点はNavigationロジックです。WebはNavigation2.0でネイティブはNavigation1.0で動かしています。Navigationについては以下記事を参考にしてください。

https://zenn.dev/ntaoo/articles/6641e846765da1

もともとは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を管理するために使用しています。

参考にした記事

数えきれない記事のおかげでリリースできました。開発途中から参考リンクをメモしていたので、それをまとめています。

https://matsumarudesu.com/flutter-web-app-release-link/

この記事に贈られたバッジ