flutterのインストールからサンプルプログラムを動かすまで #iOS

目的

モバイルアプリの開発を1つのコードで実装することを目的とし、そのためのツールとしてFlutterを使用することとした
Flutterのインストールを行い、インストール後の確認としてサンプルプログラムを作成してiOSとAndroidの各シミューレタで動かす

環境

OS：macOS Mojave（10.14.6）
iOS向けのコマンドラインツール等はインストール済み(iOSの開発をした端末を使用）
動作確認はVSCodeを使用（インストール済み）

flutterのインストール

gitからclone

# 開発用フォルダへ移動
cd /Users/xxxx/develop
# gitから取得
git clone https://github.com/flutter/flutter.git

flutterへパスを通す

# bash_profileへ設定追加
export PATH="\$PATH:`pwd`/flutter/bin" >> ~/.bash_profile
# 設定を即時反映させる
source ~/.bash_profile

開発者ツールをダウンロード（任意）
```
flutter precache
```
環境構築状況の確認
```
flutter doctor
```
flutter doctorの結果に応じて必要なツールをインストール
- 表示されたメッセージの内容に合わせて設定していけばOK
- 解決しない場合は個別に調査

私の環境で足りなかった設定の追加

android studio のセットアップ
- android studio のページからインストーラをダウンロードして実行
cocoapods のインストール
- インストールコマンドを実行
```
  sudo gem install cocoapods
```
```
  ERROR:  While executing gem ... (NoMethodError)
    undefined method `invoke_with_build_args' for nil:NilClass
```
- エラーになったので、エラーメッセージを調べてた結果rubyを入れ直し
```
  rbenv uninstall 2.6.1
  rbenv install 2.6.1
```
- インストールコマンドを再実行して問題なく終了することを確認
flutter doctorを実行 → android studio のtool chainのエラーが消えない
```
[!] Android toolchain - develop for Android devices: is partially installed; more components are
  available. (Android SDK version 30.0.2)
```
- android studio からコマンドラインツールを追加インストール
  - 参考ページ(https://qiita.com/pe-ta/items/e5a1813b21de8d446407#原因)
- 次のflutter doctorの実行でandroidのライセンス確認？のエラーが出ていたので、メッセージに合わせてコマンドを実行
```
  flutter doctor --android-licenses
```
デバイスが見つからない
```
[!] Connected device
    ! No devices available    
```
- android studio から仮想端末を起動
  - android studio を起動
  - 「Configure → AVD manager」
  - 設定済みの端末があったので、そのまま再生ボタンのアイコンをクリックして実行

flutter doctor ですべての問題が解決していることを確認

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.23.0-19.0.pre.83, on Mac OS X 10.14.6 18G6020 darwin-x64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.48.0)
[✓] Connected device (1 available)

サンプルプロジェクトの作成、シミュレータでの動作確認

必要に応じてVSCodeの拡張機能を入れる、これらは入れておきましょう
- Flutter
- Dart
プロジェクトを作成
```
flutter create {project name}
```
VSCodeでlib/main.dartを開く
iOSでの動作確認
- F5もしくはrun→start debuggingで実行
- シミュレータの選択肢が表示されるのでOSを選択
- iOSシミュレータ起動後、しばらく（数分程度）待つと起動します
- iOSとして動作することを確認
androidでの動作確認
- コマンドパレットから「Flutter: Select Device」を選択、androidのエミュレータを選択
- 選択したエミュレータ起動後、androidとして動作することを確認

参考

公式サイトのflutterのインストール手順（macOS）(https://flutter.dev/docs/get-started/install/macos)
github(https://github.com/flutter/flutter)
FlutterでHello worldを動かすまでの環境構築手順（iOS, Android）(https://qiita.com/unsoluble_sugar/items/deaa129fb289922c8634)