Flutterで新しいアプリを作るときの手順まとめ

まっさらな状態からFlutterでiOS向けとウェブアプリを構築するまでの手順の備忘録。

Firebaseも使う

https://developer.apple.com/account/resources/identifiers/list

https://appstoreconnect.apple.com/apps
Bundle IDにアプリ名を含ませるつもりならIdentifiersを適当に作り、その名前が使えるのかアプリを作ってしまう
App Check で使うのでApple IDをメモしておく

kingu

Firebaseのプロジェクトを作る
XXX-prod と XXX-stg

https://console.firebase.google.com/
Blaze プランに変更する

kingu

必要に応じてHostingからカスタムドメインを接続
接続の確認と証明書の作成に時間がかかるので先にやっとく

kingu

プロジェクトルートディレクトリを作って、appを作る。
xxx.code-workspaceを追加する。

{
  "folders": [
    {
      "path": "."
    },
    {
      "path": "app"
    },
    {
      "path": "firebase"
    }
  ],
  "settings": {
    "editor.tabSize": 2
  }
}

flutter create \
    --platforms ios,web \
    --template app \
    --org dev.kingu \
    --project-name FIXME \
   app

kingu

pubspec.yaml を掃除して、 firebase_core を追加

Flutterバージョンを固定

environment:
  sdk: 3.6.0
  flutter: 3.27.1

buildは自動で採番するので削除

version: 1.0.0

kingu

Runner.xcworkspace を開いて Automatically manage signingがうまくいってるか確認する

kingu

flutter build ios --config-only

kingu

Schema configurations
Bundle Identifier suffix
Podfile
xcconfig

Podfile

project 'Runner', {
  'Debug-stg' => :debug,
  'Debug-prod' => :debug,
  'Profile-stg' => :release,
  'Profile-prod' => :release,
  'Release-stg' => :release,
  'Release-prod' => :release,
}

# Uncomment this line to define a global platform for your project
platform :ios, '17.6'

xcconfig

kingu

Info.plist

Bundle display name
Bundle name
ITSAppUsesNonExemptEncryption

kingu

app/scripts ディレクトリに追加して、修正して、実行

https://gist.github.com/KoheiKanagu/669681c8095ed2ebdac5204ebb6fbeee
Firebaseにアプリが作成されるので、Apple ID と チームID を追加してApp Check有効化
Web向けにreCAPTCHAを設定して秘密鍵を追加

kingu

ビルドできるかチェック

flutter build ios --flavor stg
flutter build ios --flavor prod

kingu

app以下で実行してFlutterのバージョンを固定

fvm use --pin stable

kingu

app/scripts/*.sh をコピー

analysis_options.yaml をコピー

build.yaml をコピー

 TODOhttps://github.com/KoheiKanagu/blooms

kingu

pubspec.yaml に必要なものを追加

dart pub add slang slang_flutter dev:slang_build_runner

Firestoreを使うなら、target 'Runner' do の中にプレビルド版を入れる

  pod 'FirebaseFirestore',
    :git => 'https://github.com/invertase/firestore-ios-sdk-frameworks.git',
    :tag => '11.6.0'

flutterfire_configure.sh 実行して upload-crashlytics-symbolsを追加
ビルドしてPodfile.lockを更新

kingu

アイコン作って差し替え

kingu

app/.vscode/launch.json を作ってアイコンの確認

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "stg",
      "request": "launch",
      "type": "dart",
      "args": [
        "--flavor",
        "stg",
      ],
      "program": "lib/main.dart"
    },
    {
      "name": "prod",
      "request": "launch",
      "type": "dart",
      "args": [
        "--flavor",
        "prod",
      ],
      "program": "lib/main.dart"
    },
  ]
}

kingu

Firebase コンソールでFirestoreのデータベースを作成
App CheckでFirestoreなど有効にする

firebase init でセットアップ

kingu

OIDCのセットアップ

kingu

dependabot.yml をコピー
GitHub Actionsのワークフローをコピー
Xcode Cloudの動作確認
Cloud Functionsのセットアップ
手動でfirebase deployしてチェック

kingu

Firebaseの"統合"を設定する
Slackとの連携など