Open2

【Flutter】アプリ作成〜だいたいよくやること

bassarbassar

グローバルの Flutter をアップグレード

Dart については Flutter 同梱なので Dart を別途上げる必要はない。

$ asdf plugin list
dart
flutter

$ asdf install flutter latest
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 1114M  100 1114M    0     0  31.0M      0  0:00:35  0:00:35 --:--:-- 38.5M

$ asdf global flutter latest

$ flutter --version
Flutter 3.19.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 300451adae (30 hours ago) • 2024-03-27 21:54:07 -0500
Engine • revision e76c956498
Tools • Dart 3.3.3 • DevTools 2.31.1

アプリ用のディレクトリを作成

アプリ名にはハイフンは使えない（flutter create でエラーになる）。

$ mkdir sg_snap && cd $_

アプリでの Flutter のバージョンを設定

$ asdf local flutter latest

$ flutter --version
Flutter 3.19.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 300451adae (30 hours ago) • 2024-03-27 21:54:07 -0500
Engine • revision e76c956498
Tools • Dart 3.3.3 • DevTools 2.31.1

flutter create

末尾に . をつける。
org オプションに渡す値のハイフン（iOSのみ可）とアンダーバー（Androidのみ可）の問題については、Flutter側でよしなにやってくれる。

$ flutter create --org jp.sonicgarden --platforms=android,ios .

リモートリポジトリ作成

省略。

first commit

git init
git add -A
git commit -m "flutter create --org jp.sonicgarden --platforms=android,ios ."
git remote add origin https://github.com/SonicGarden/sg_snap
git push -u origin main

（必要であれば）Xcode から、Team と Bundle Identifier を変更

Bundle Identifier については、キャメルケースからケバブケースにしたい場合などは手動で変更する。
複数の Team に属している場合などは、Team も適切なものに変更する。

また、PRODUCT_BUNDLE_IDENTIFIER という文字列でプロジェクト内を検索し、期待する値になってない箇所については追加で修正する。

Xcode を開くには↓のコマンドを打つ。

xed ./ios/Runner.xcworkspace

VSCode での起動を設定

mkdir .vscode && touch .vscode/launch.json

{
  "configurations": [
    {
      "name": "Flutter Dev",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart"
    }
  ]
}

pubspec.yaml を整理

今回は↓のようにしてみた。
https://github.com/SonicGarden/sg_snap/commit/2fadd5ab435a36a5a3ffd6a853439c80a1002545

name: sg_snap
version: 1.0.0+1

environment:
  sdk: ">=3.3.3 <4.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
bassarbassar

Firebase プロジェクト作成

  • 手順省略

Flutter アプリを Firebase につなげる

https://firebase.google.com/docs/flutter/setup?hl=ja&platform=ios

flutterfire configure を実行。

  • --project オプションが便利
  • --ios-bundle-id と --android-package-name オプションも指定すべき（未指定の場合は、推測による値となり、適切でない値になる可能性があるため）
flutterfire configure --project sg-snap --ios-bundle-id jp.sonicgarden.sg-snap --android-package-name jp.sonicgarden.sg_snap

firebase_core を追加。

flutter pub add firebase_core
flutterfire configure --project sg-snap --ios-bundle-id jp.sonicgarden.sg-snap --android-package-name jp.sonicgarden.sg_snap

main.dart の main メソッドの中に↓を追記（差分全量）

await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);