Flutterの構築 アプリ起動まで

なかなか見本通りに行かなかったので備忘録
# 目次
- [目次](#目次)
- [Flutter のインストール](#flutter-のインストール)
- [Android のセットアップ](#android-のセットアップ)
- [iOS のセットアップ](#ios-のセットアップ)
- [flutter doctor を実行してエラーを解消](#flutter-doctor-を実行してエラーを解消)
- [アプリ起動](#アプリ起動)
- [参考](#参考)

# Flutter のインストール
1. [公式](https://docs.flutter.dev/get-started/install)からインストール
2. ユーザーフォルダ直下に「development」フォルダを作成し、ダウンロードした「flutter」フォルダを移動
3. パスを通す
   1. 使用しているシェルを調べる
      ```
        $ echo $SHELL
      ```
   2. シェルに応じてパスを設定
      ```
        // zshの場合
        $ echo 'export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"' >> ~/.zshrc
        $ source ~/.zshrc
      ```
      `bash`が返ってきた場合上記の`zshrc`を`bash_profile`に置換。
   3. パスが通ってるか確認
      ```
        which flutter
      ```
# Android のセットアップ
1. [Android Studio 公式 HP](https://developer.android.com/studio?hl=ja)からダウンロードし、案内に従ってインストール
2. `Welcome To Android`が表示されたら、左のメニューバーから`Plugins`から`Flutter`を検索してダウンロード
3. Android Studio を再起動し、初期画面に「New Flutter Project」があることを確認
4. プロジェクトを作成
   1. Nameに任意の名前を入れる
   2. 右上のツールバーからスマホアイコンを選択
   3. 右のdevice一覧にある端末から▶を押して起動
# iOS のセットアップ
1. [AppStore](https://apps.apple.com/us/app/xcode/id497799835)からXcodeをダウンロード
   ※結構時間かかる
2. Xcode を起動して端末を選択してデータをダウンロード
    なぜかセットアップが完了しないので`$ flutter doctor -v`を実行すると、Xcodeでエラー吐いてた。
    cocoapodsもないよ〜ってエラー返ってきてたので下記も実行
    ```
    $ brew install cocoapods
    $ pod setup
    ```
    下記を実行するようエラーが返ってきたので追加で実行
    ```
    $ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    $ sudo xcodebuild -runFirstLaunch
    ```
    Android StudioからiOSも起動できるのかと思ったけど、いろんなサイト見てるとSimulatorで起動できてれば大丈夫そうなのでここで中断。
# flutter doctor を実行してエラーを解消
下記エラーが返ってきたけど`path/to/sdkmanager`が分からず詰んだ。
```
 Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
```
Android Studioの起動画面、右上の三点リーダーから「Android SDK」を選択し、「SDK Tools」＞「Android SDK Command-line Tools(latest)」と選択して設定を進める。
インストール完了後、ターミナルで再度`flutter doctor`を実行するとエラー解消
```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.1-0.0.pre.1, on macOS 14.1.1 23B81 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.84.2)
[✓] Connected device (3 available)
[✓] Network resources
```
# アプリ起動
1. `/Users/【ユーザー名】/StudioProjects/【Android studioでつけた名前】/`でVScodeを開く
2. ターミナルで以下を実行
   ```
   $ flutter create 【任意のアプリ名】
   ```
3. プロジェクトのNull安全を有効にする
   ```
   $ ~/development/flutter/bin/dart migrate --apply-changes
   ```
4. 任意のアプリ名をつけたフォルダに移動
   ```
   $ cd 【任意のアプリ名】
   ```
5. デバックしたいdeviceを起動しておく
   Android studio を起動してから`flutter run`を実行すればAndroid,
   Xcode で iOSのdevice起動してから`flutter run`を実行すればiOS画面を確認できる
   ```
   $ flutter run
   ```
   ※ `flutter run`はかなり時間がかかる
   ※ 他にも方法は色々ありそうだったけど、自分にとってはこれが一番楽だった
6. `【任意のアプリ名】/lib/main.dart`の中身を変えると起動した画面の中身も変わる
# 参考
-[Flutterの環境構築(Mac編) | Zenn](https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc)
-[【Android Studioの使い方】プロジェクトを削除する](https://codeforfun.jp/android-studio-manual-how-to-delete-project/)
-[flutter-study.dev](https://www.flutter-study.dev/)
-[【Mac M1】「flutter doctor」実行時の「cmdline-tools component is missing」の解決法 | Zenn](https://zenn.dev/imasaka0909/articles/00ebfaf74f9cea)
-[FlutterでHelloWorldを動かすまで | Qiita](https://qiita.com/ozaki25/items/1d8701f8f4b8e9e20b0d)