【macOS】Flutterの環境構築【iOS / Android対応】【4つの手順】

# はじめに
「Flutter SDKのインストール」から「iOSとAndroidでFlutterアプリを実行」までを、以下の手順で解説します。

1. Flutter SDKのインストール
1. シンプルなFlutterアプリの作成
1. iOSでFlutterアプリを実行
1. AndroidでFlutterアプリを実行

# 環境
OSはmacOSを利用します。macOS以外ではiOSの環境構築ができないためです。

FlutterのインストールとアップデートにGitが利用されているため、事前にXCodeをインストールしておくことをお勧めします。
[Webダウンロード](https://developer.apple.com/xcode/) / [Mac App Store](https://apps.apple.com/us/app/xcode/id497799835)

Homebrewを利用するため、事前にHomebrewをインストールしておくことをお勧めします。
[インストール方法](https://qiita.com/zaburo/items/29fe23c1ceb6056109fd)

# Flutter SDKのインストール

HomebrewでFlutter SDKをインストールします。
以下のコマンドを実行します。

```zsh
brew install flutter
```

環境構築を完了するために必要な依存関係があるかどうかを確認します。
以下のコマンドを実行します。

```zsh
flutter doctor
```

このコマンドは環境をチェックし、確認結果を表示します。
以下のようにインストールする必要のあるツールや、実行する必要のあるコマンドが出力されます。

```
[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://docs.flutter.dev/setup/#android-setup for detailed instructions.
```

以降の手順でレポートに表示されるツールのインストールやコマンドの実行を行います。

# シンプルなFlutterアプリの作成
セットアップ後の動作確認用にシンプルなFlutterアプリを作成します。
以下のコマンドを実行します。

```
flutter create my_app
```

# iOSでFlutterアプリを実行
## iOSシミュレータでFlutterアプリを実行
iOSシミュレータを起動します。
Spotlightを使用するか、以下のコマンドを実行します。

```zsh
open -a Simulator
```

Flutterアプリを実行します。
シミュレータが起動した後、Flutterアプリのディレクトリで以下のコマンドを実行してください。

```
flutter run
```

## iOS端末でFlutterアプリを実行
XCodeでFlutterアプリに署名を行います。

XCodeでFlutterアプリを開きます。
Finderで`ios/Runner.xcworkspace`を開くか、Flutterアプリのディレクトリで以下のコマンドを実行します。

```
open ios/Runner.xcworkspace
```

左側のナビゲーションパネルでRunnerプロジェクトを選択します。
TARGETSのRunner設定ページで、[Signing & Capabilities]>[Team]で開発チームが選択されていることを確認します。
チームが選択されていない場合、チームを選択してください。
チームを選択できない場合、AppleIDを使用してXCodeにサインインする必要があります。
![xcode-account.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114918/27bc0586-8bde-6b81-ad4b-930370cc1394.png)
チームを選択すると、Xcodeは開発証明書を作成してダウンロードし、デバイスをアカウントに登録して、プロビジョニングプロファイルを作成してダウンロードします。

MacにiOS端末を接続します。

Flutterアプリを実行します。
XCodeの[実行]をクリックするか、Flutterアプリのディレクトリで以下のコマンドを実行してください。

```
flutter run
```

iOS端末でアプリを初めて実行する場合、MacとiOS端末の開発証明書の両方を信頼する必要があります。
MacとiOS端末を接続するときに、iOS端末側で「コンピュータを信頼するか」を確認されます。信頼するを選択してください。
次にiOSデバイスの設定アプリに移動して、[一般]>[プロファイルとデバイス管理]から証明書を信頼してください。

# AndroidでFlutterアプリを実行
## Android Studioのインストール
[Android Studio](https://developer.android.com/studio)をダウンロードしてインストールします。
Android Studioを起動してAndroid Studioのセットアップウィザードを実行します。
セットアップウィザードにより、最新のAndroid SDKとAndroid SDKコマンドラインツールとAndroid SDK Build-Toolsがインストールされます。

FlutterがAndroidStudioを認識していることを確認します。
以下のコマンドを実行してください。

```
flutter doctor
```

FlutterがAndroidStudioを認識していない場合、FlutterにAndroid Studioの設定を行います。
以下のコマンドを実行してください。

```
flutter config --android-studio-dir <Android Studioのパス>
```

## Androidライセンスに同意
Flutterを利用する前に、Android SDKプラットフォームのライセンスに同意する必要があります。

ライセンスの署名を行います。
以下のコマンドを実行してください。

```
flutter doctor --android-licenses
```

ライセンスへの同意が完了したら、Flutterを使用する準備ができていることを確認します。
以下のコマンドを実行してください。

```
flutter doctor
```

## AndroidエミュレータでFlutterアプリを実行
Android Studioを起動して、[設定アイコン]>[AVD Manager]をクリックして、AVD Managerを起動します。
[Create Virtual Device...]をクリックします。

デバイス定義を選択し、[Next]をクリックします。
エミュレートするシステムイメージを一つ以上選択して[Next]をクリックします。x86またはx86_64イメージをお勧めします。
AVD構成が正しいことを確認して、[Finish]を選択します。

AVD Manager(Android Virtual Device Manager)で[Actions]>[実行]をクリックして、エミュレータを起動します。

![スクリーンショット 2022-03-28 9.45.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114918/7622ea17-c426-e619-48bd-eddbb534119b.png)

Flutterアプリを実行します。
エミュレータが起動した後、Flutterアプリのディレクトリで以下のコマンドを実行してください。

```
flutter run
```

## Android端末でFlutterアプリを実行
Android端末の開発者向けオプションとUSBデバッグを有効にします。詳細な手順は[Androidのドキュメント](https://developer.android.com/studio/debug/dev-options)に記載されています。

MacとAndroid端末を接続します。Android端末にプロンプトが表示されたら、MacにAndroid端末へのアクセスを許可します。

Flutterアプリを実行します。
Flutterアプリのディレクトリで以下のコマンドを実行してください。

```
flutter run
```

# 参考文献
[公式のインストール手順（英語）](https://docs.flutter.dev/get-started/install/macos)
[\[brew install flutter\] Flutter 環境構築](https://qiita.com/tktcorporation/items/275b015da4a787d5f74d)