FlutterFlowからFlutterへの移行

FlutterFlowからFlutterへの移行

「月謝袋アプリ」は久しぶりの3年ぶりのアプリ開発だったので
FlutterFlowで作成してみました。
しかし、FlutterFlowも、UIの部分はクリックで確認しながらできるのがいいのですが、
機能の実装はそれなりに大変で
FlutterもFlutterFlowも、どちらも大変という印象を持ちました。

ただ、今後の開発について
これからは:

  • 月額料金なしで開発可能 💰
  • Flutterの自由度を活かした機能追加ができるかも
  • Android Studioで直接コードを編集

という思いから
FlutterFlowからFlutterへの移行を決めました。

とてもこれは大変な作業になると覚悟を決めていました。
幸い、今日は午後が仕事休みだったので決行しました。

目次

FlutterFlowからコードをダウンロード

FlutterFlowダッシュボード
→ プロジェクトを開く
→ 右上の設定メニューからダウンロード

zipファイルがダウンロードされました→解凍したものを適切なフォルダーに設置

Android Studioでのセットアップ

設置したフォルダーを開き、flutter pub get→エミュレーターで動作確認
意外にも(初回だから時間はかかりましたが)簡単に起動できました。アプリが完璧に動作していて感動しました。
FlutterFlowからエクスポートしたコードが問題なく動いています。

本番リリースの準備

パッケージ名の確認


Android Studioで以下のファイルを確認:
android/app/build.gradle

`applicationId`が既存のアプリと同じのが入っていました!!

pubspec.yaml

を開いて、version:を現在のストア公開バージョンより大きくします。

例:1.0.0+1 → 1.0.1+2 など

今回はversion: 1.0.2+3にしてPub getしました

keystoreファイル

keystoreが見つからないなのでFlutterFlowダッシュボードから取得
FlutterFlowにログイン
プロジェクトを開く
設定 → Deploy → Android

下記の鍵のマークでダウンロードできました。

解凍すると2つのファイルがありました

credentials.txt
monthly-fee-samp-hynlsi-keystore.jks

直接ドラッグでjksを選択してandroid/app/に入れました。
credentials.txtは配置せず、内容だけ確認
中身は下記の3行でした。(xxxxは伏せ字)

alias: xxxx-hynlsi
alias password: xxxx
keystore password: xxxx

左側のプロジェクトツリーでandroidフォルダを右クリック
New → File
ファイル名:key.properties

  1. 以下の内容を記入
    propertiesstorePassword=xxxx
    keyPassword=xxxx
    keyAlias=xxxx-hynlsi
    storeFile=xxxx.jks
    (実際のパスワードは、伏せ字なしで全文を入力してください)

buildTypesの修正

android/app/build.gradleを開く

release署名に変更

ビルド

そして、いつも通りios,Androidともにビルド作業
Xcodeは「Runner」→「Signing & Capabilities」→「Team」が空だったので
自分のApple Developer Teamを選択して「Bundle Identifier」が自分のバンドル名であることを確認しました。

そしてビルドしたものをApp Store ConnectとGoogle Play Consoleにアップしたのでした。


おお、意外に簡単でないか!!
やれやれ!!
と、思ったのも束の間
このあと、、、まさかの展開!?

アイコンがFlutterのデフォルトアイコンに!!

しばらく経ってからApp Store Connectを見に行くと

さっきアップしたビルドのアイコンがFlutterのデフォルトアイコンに!!
アイコンファイルがFlutterFlowからのエクスポート時に上書きされたのかもしれません。
実際ios/Runner/Assets.xcassets/AppIcon.appiconset/AppIcon-29@2x.png
を見にくと
やはり私のアイコンではなくて、Flutterのデフォルトアイコンでした

pubspec.yaml設定が指している画像ファイルをみると:

assets/images/app_launcher_icon.png
assets/images/adaptive_foreground_icon.png

これらがおそらくFlutterのデフォルトアイコンになっていました。
これらを見に行くと、それは2つとも私の作った緑の背景の月謝袋のアイコンでした。
ということでアイコンのファイルそのものはあるということでした。
なのでコマンドで生成します

dart run flutter_launcher_icons

これで生成されました。
実際、ios/Runner/Assets.xcassets/AppIcon.appiconset/を見に行くと

緑の月謝袋アイコンに正しく更新されていました

Screenshot

新しいビルドを作成

pubspec.yamlを開いて、ビルド番号を上げ
iOSを再ビルド、App Store Connectに再アップロード
Androidも再ビルド、すぐに審査に提出という流れになりました。

長い道のりでしたが、FlutterFlowからFlutterへの移行を完成させることができて安心しました。
まだ、安心するのは早いかもしれませんが・・・

目次