なかなか見本通りに行かなかったので備忘録

目次

目次
Flutter のインストール
Android のセットアップ
iOS のセットアップ
flutter doctor を実行してエラーを解消
アプリ起動
参考

Flutter のインストール

公式からインストール
ユーザーフォルダ直下に「development」フォルダを作成し、ダウンロードした「flutter」フォルダを移動
パスを通す
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 のセットアップ

Android Studio 公式 HPからダウンロードし、案内に従ってインストール
Welcome To Androidが表示されたら、左のメニューバーからPluginsからFlutterを検索してダウンロード
Android Studio を再起動し、初期画面に「New Flutter Project」があることを確認
プロジェクトを作成
1. Nameに任意の名前を入れる
2. 右上のツールバーからスマホアイコンを選択
3. 右のdevice一覧にある端末から▶を押して起動

iOS のセットアップ

AppStoreからXcodeをダウンロード
※結構時間かかる
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

アプリ起動

/Users/【ユーザー名】/StudioProjects/【Android studioでつけた名前】/でVScodeを開く

ターミナルで以下を実行

$ flutter create 【任意のアプリ名】

プロジェクトのNull安全を有効にする

$ ~/development/flutter/bin/dart migrate --apply-changes

任意のアプリ名をつけたフォルダに移動
```
$ cd 【任意のアプリ名】
```
デバックしたいdeviceを起動しておく
Android studio を起動してからflutter runを実行すればAndroid,
Xcode で iOSのdevice起動してからflutter runを実行すればiOS画面を確認できる
```
$ flutter run
```
※ flutter runはかなり時間がかかる
※ 他にも方法は色々ありそうだったけど、自分にとってはこれが一番楽だった
【任意のアプリ名】/lib/main.dartの中身を変えると起動した画面の中身も変わる

参考

-Flutterの環境構築(Mac編) | Zenn
-【Android Studioの使い方】プロジェクトを削除する
-flutter-study.dev
-【Mac M1】「flutter doctor」実行時の「cmdline-tools component is missing」の解決法 | Zenn
-FlutterでHelloWorldを動かすまで | Qiita