Flutter × Firebaseでアプリを個人開発した話

今回、初めてFlutterとFirebaseを使ってandroidrアプリを作りました。
個人でアプリを作ってみたい人やFlutterを使ってみたい人の参考になればと思います。

作ったアプリ

てすろぐ
テストや問題集を解いた結果を保存し、復習に使えるようにするアプリです。
今後、iosアプリもリリースする予定です。
アプリに関してはこちらにも書きました。

使った言語、サービス

Flutter

1つのソースで、android、ios両方のアプリができるのでこちら選びました
僕の場合、現場で使える Flutter開発入門を買って、一通り勉強してから作り始めようと思ったのですが、初心者には少し難しい内容で、1章だけ読んで挫折しました・・
ただ、サンプルソースがダウンロードできるようになっていたので、それをダウンロードし、1画面だけ動かして動きを見てみました。ソースを見ても何がどのような意味か？わからなかったので、先にDart言語を学習しざっくりと把握しました。

初心者が今から始めるならこちらのサイトがお薦めです。
Flutter実践入門 ～環境構築からAndroid/iOS/Webに広告を付けて同時にリリース!!～

Firebase関連以外でおもに使ったFlutterライブラリー

horizontal_data_table

一番上と左の項目を固定して表示するテーブルを作る為に使いました。
実際に作ったテーブル画面

charts_flutter

グラフを表示する為に使いました。
いろいろなグラフが表示できるのでおすすめです。
実際に作ったグラフ画面

flutter_native_splash

スプラッシュを表示する為に使いました。
Flutterでスプラッシュ表示するならこれって感じで、いろんなところで掲載されています。
掲載されている通りに、実装してみたのですが、なぜか動かずハマりました
https://github.com/jonbhanson/flutter_native_splash/issues/54
で解決しました。

Firebase

アプリ外でデータ管理とユーザ認証をしたかったので使いました。最初、レンサバを使うことも検討したのですが、無料ということでこちらを使いました。
初めてだったのですが、思ってたより簡単に使えて、実装コストも下げられました。
Firebaseの公式サイトには、Flutterでのソースサンプルが載ってないので、flutter firebase とかで検索して調べるとよいです。

こちらのサイトがお薦めです。
Cloud Firestoreを使ってみる

リリース作業

開発と同じくらい、リリースする際の準備作業が難易度が高かったので、備忘録代わりに書いておきます。

プライバリーポリシーを用意する

ユーザーデータを収集したり、広告を表示したりする場合は、プライバリーポリシーの表示が必要です。また、広告を表示してなくても、Firebaseを使っていると、勝手に収集されるので必要になります。
他サイトを参考に簡単なものを用意し、Firebase Hostingにおき、アプリから遷移できるようにしました。

画像を用意する

GooglePlayストアに表示する画像を準備する必要があるのですが、かなり面倒です。
適当な画像をアップしたら、Google側でリサイズしてくれればいいのですが、そうもいかず、こちらで指定のサイズの画像をする必要があります。
デザインツールを使ったことがないので、パワーポイントを駆使して作成しました。

アイコン

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html
のサイトで、アイコン用画像をアップして、512×512pxの画像を生成しました。

FeatureGraphic

1024×500pxの画像を用意する必要があります。
https://www.norio.be/graphic-generator/
を使えば簡単にできるのですが、アプリで使っているフォントを使いたかったので、独自に作りました。
パワーポイントで四角い枠を用意し、サイズを1024×500の比率になるようにします。比率さえ、あっていれば、単位はなんでもOK。
その枠の中に、字やアイコン画像等を入れて、全選択して図として保存。
そのままだと、1024×500pxにならないので、
https://www.peko-step.com/tool/resize.html
などのサイトで、1024×500pxになるようにリサイズしました。

キャプチャ画像

こちらは指定されたアスペクト比の画像が必要です。
android studioのシュミレーターで表示した画面の比率がちょうど指定された比率と同じだったので、画面キャプチャをとってそれを加工して使うことにしました。

Bundleのアップロードでエラー

https://minpro.net/apps-targeting-android-12-and-higher-are-required-to-specify-an-explicit-value-for-androidexported
https://qiita.com/yoshiike/items/2c934e91a699259d9ac3
を見て、解決

これから作る方へのアドバイス（個人的な見解です）

ソースは見慣れてくる

最初は何が書かれているかわからず、1行1行は理解できても全体は理解できないかもしれないですが、何日かソースを見ているとだんだん見慣れてきて、自然に理解できるようになります。そのうち理解できるようになるくらいで考えて気楽にいきましょう

「Flutter "作りたいもの"」で検索すれば大体でてくる

一般的には、公式サイトを見て調べるのがいいんでしょうが、公式サイトは英語なのと日本語に翻訳してどうもわかりづらい・・。
Flutterに関する記事や、サンプルソースをいろんな方がアップされているので、一覧表示する画面を作りたいならFlutter 一覧表示、画面遷移させたいならFlutter 画面遷移って検索すると結構ページが出てきます。その中からわかりやすくて使えそうなのを選んで使ってみるとよいです。サンプルソースを見るとどんなクラスやメソッドが使われているかわかるので、そこからFlutter クラス名とかでさらに検索してみるのも良いです。

何もしてないのに動かなくなったら、PC再起動、シュミレータ再起動

Android Studioを使って開発を行ったのですが、ごくたまに今まで動いていたのに急にうごかなくなったり、プログラムに問題がないのになぜかエラーが出るなどの問題が発生しました。その時は、一旦エミュレータを削除して起動しなおす、Android Studio本体を再起動する、PCを再起動するを、順に試してみると解決するかもしれません。
僕の場合、Firebaseとの接続が急にできなくなったのですが、PCを再起動したら治りました。