Flutter実行環境の構築(Android StudioとXcode)

# 概要
急遽Flutterの検証を行う必要があったので備忘録兼ねて構築からインストールまでを記事にまとめたいと思います。
iOSでの実行も確認したいので、Xcodeでの実行もまとめていますが、メインはAndroid Studioでの環境構築となります。

# 各種手順
Android Studioと各種ツールのインストール
Xcodeインストール
Flutterインストール
Android Studioに対するFlutterプラグインのインストール
Flutterプロジェクト作成
Flutterの各種初期設定(初回のみ)
Flutterアプリケーション起動確認

# Android Studio

## インストールまで
[Android Studio公式](https://developer.android.com/studio)に接続して「Download Android Studio」をクリック

![AndroidStudioダウンロード_Mac_01](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/29001db0-a596-e13e-0297-54c6610941ff.png)

利用規約の「同意します」にチェックを入れダウンロード
下記のファイルがダウンロードされるので実行

Windows:`android-studio-ide-183.5522156-windows`
Mac:`android-studio-ide-183.5522156-mac.dmg`

**Windowsの場合**
ダウンロードされたexeファイルを実行して「Next」をクリック
![install_Windows_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/28a74312-68fb-eeb6-cd1e-36893f498b23.png)

「Next」をクリック
![install_Windows_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/14044173-4367-1ca1-c4c4-c74dc439b39d.png)

「Next」をクリック
![install_Windows_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/a63496e9-b4c4-10fd-833a-f1c20341a321.png)

「Install」をクリック
![install_Windows_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/bb586780-b10e-257a-f539-244911c1f082.png)

完了したら「Next」をクリック
![install_Windows_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/ff09ae23-a6cd-e828-4c0c-1d79bf21b0f2.png)


**Macの場合**
上記のファイルを実行して生成される「Android Studio.app」をアプリケーションフォルダに入れた後appを実行する

## 初期設定
インストールが完了したAndroid Studioを起動する

「Do not import settings」にチェックがついた状態で「OK」をクリック
![AndroidStudioダウンロード_Mac_02](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/c644682b-67a1-1ead-2033-9dd9c2901c05.png)

「Don't send」をクリック
![AndroidStudioダウンロード_Mac_03](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/1cba095d-bc70-2e7f-2e79-91716960acd1.png)

「Next」をクリック
![AndroidStudioダウンロード_Mac_04](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/ea593fc8-9549-c084-46bc-b4be5818b9a2.png)

「Custom」にチェックが入っていることを確認して「Next」をクリック
「Standard」の場合、テーマ選択以降は省略される
![AndroidStudioダウンロード_Mac_05](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/73b7042b-a5ab-4674-8694-8a75f2fbe6f8.png)

好きな方のテーマを選択して「Next」をクリック
![AndroidStudioダウンロード_Mac_06](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/b7b70cc9-33fa-511c-16ee-a4ea5c288306.png)

※「Custom」の場合表示
インストールするコンポーネントとAndroid SDKのインストール先を指定して「Next」をクリック

**Android SDKのインストール先を変更した場合**
Flutterはデフォルトインストール先を基にしてAndroid SDKを確認するので、変更した場合は
環境変数`ANDROID_HOME`を作成し、パスは`Android SDK Location`を指定すること
![Android_install_ex1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/7f150b59-62ff-db6b-161d-b2fd3e2d382d.png)

※「Custom」の場合表示
「Next」をクリック
![Android_install_ex2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/c622159d-74d7-3307-89ca-846a78cefe8a.png)

インストール構成を確認して「Finish」をクリック
![AndroidStudioダウンロード_Mac_07](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/f9e026a3-031a-d671-6dbe-897c227e8361.png)

「Finish」をクリック
![AndroidStudioダウンロード_Mac_08](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/860127b2-64e4-c5bc-03ae-7eef1c50701d.png)

### HAXMのインストールに失敗した場合
`HAXM installation failed`と表示された場合

[HAXM公式サイト](https://github.com/intel/haxm)に接続後、「Downloads」欄の`here`をクリック
![HAXM_install_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/2ea33d42-0f90-fcb4-71e3-50b043243b45.png)

対応するOSのzipをダウンロード
![HAXM_install_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/d1946d84-ff6c-6329-284b-1a378df3fa37.png)

zipを解凍後にできたアプリケーションを実行
「続ける」をクリック
Windows: `intelhaxm-android.exe`
Mac: `IntelHAXM_7.5.1.dmg`
![HAXM_install_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/0d2fb0b7-fbe0-0bec-9bc8-5bfa2bcd9d64.png)

インストール先の変更が必要でなければ「インストール」をクリック
![HAXM_install_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/a0c6466d-8328-e06a-266c-2415d5d97d90.png)

インストール後に下記の図のメッセージが表示される場合は機能拡張を許可する必要がある
![HAXM_install_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/664f731d-c7a5-a4e8-e54d-f59876fe9999.png)

「システム環境設定」の「セキュリティとプライバシー」を開き、`ダウンロードしたアプリケーションの実行許可`下部に`Intel HAXM`への権限を確認する文章が追加されているので「許可」をクリック
![HAXM_install_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/9a5a4365-f60a-d4bf-cebb-f6d39b90bd20.png)

#### 実行確認
**Macの場合**
[MacでAndroidエミュレータが起動しない(HAXMが起動しない)とき](http://mocotan.hatenablog.com/entry/2018/01/28/072658)
`kextstat | grep intel`を実行した場合に何らかの文字列が出力されたらインストールが完了している

### HAXMのアンインストール
HAXMで何らかの不具合が発生している場合は一旦アンインストールしてインストールをし直した方が良い

**Windowsの場合**
[Intel Hardware Accelerated Execution Manager（HAXM) インストールとアンインストール](https://zero0nine.com/archives/2753)
`【インストール先もしくはダウンロードしたファイル先】/silent_install.bat -u`を実行する

**Macの場合**
`sudo 【インストール先もしくはインストール時にダウンロードしたファイル先】/silent_install.sh -u`を実行する

## Android Studioの日本語化
**2020/06/01追記**
Flutterの場合Android Studioの日本語化を実行すると**いくつかのタブが表示されなくなる**といった現象が発生するようです。
記事には残しておきますが実行しない方がよいでしょう。

[Android Studio / IntelliJ IDEA の日本語化と設定](https://qiita.com/cypher256/items/a87179fbe8dd7f63ec4e)
[MacでAndroid Studioを日本語化する](http://shinsuke789.hatenablog.jp/entry/2018/08/27/130714)

[Pleiades プラグイン](http://mergedoc.osdn.jp/#pleiades.html#PLUGIN)に接続して使用しているOSのプラグインをダウンロード
![language_change_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/9f6d1452-7233-2a41-45b9-a54c8be6c28c.png)

ダウンロードされたzipファイルを解凍後、以下のアプリケーションを起動
Mac: `解凍先/pleiades-mac/setup.app`
![language_change_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/e855ccf3-8e0d-e19e-a6ec-949939a6f71b.png)

「選択」をクリックして先ほどインストールした「【インストール先】/Android Studio/bin/studio64.exe」もしくは「Android Studio.app」をクリックして「開く」を選択
![language_change_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/b488d9de-f58e-78cd-b151-b6bfb73f1f41.png)

設定に問題がないことを確認して「日本語化」をクリック
![language_change_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/cecf921e-3f40-7593-70b8-35ebff471273.png)

Android Studioを起動して日本語化されていることを確認する

## AVDの作成
今回は仮想デバイスを作成したいだけなのでHAXMを使用した高速AVDでの構築を行なっておりません。
高速AVDで仮想デバイスを構築したい場合は下記の記事がとても参考になります。
[Windowsで高速AVDを利用するまでの手順をものすごく詳しく解説](https://qiita.com/keicha_hrs/items/fd714fe6cf38b5b3fbf8)

「ツール」、「AVDマネージャー」をクリックして`Android仮想デバイス・マネージャー`を起動後、「仮想デバイスの作成」をクリック
![AVD_create_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/bc93f97b-ace8-2052-f46f-a7d9cbb89df6.png)

任意のハードウェアを選択して「次へ」をクリック
![AVD_create_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/825426c2-3c7e-efad-ccd4-bc9108ffbb5e.png)

既にシステムイメージのダウンロードが完了している場合は選択するだけで良いが、目的のイメージがインストールされていない場合は
「Download」をクリックし、ダウンロードが完了したら再度選択をして「次へ」をクリックする
![AVD_create_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/7ae04eab-0914-cbde-39af-454e4ad0a879.png)

構成を変更する場合は各種変更後、「完了」をクリック
![AVD_create_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/0b65f636-b13b-4be7-d3b2-df91fe5717b8.png)

## シミュレータの起動
「ツール」、「AVDマネージャー」をクリックして作成したデバイスの右側にある「▶︎」をクリック
![simulator_Android_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/4d4260bf-7757-f720-11fc-715406a40eae.png)

ばらくするとOSが起動するので動作を確認し、正常に動くことを確認する
![simulator_Android_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/82118efa-2d3e-4e05-f59e-d8a6707a146c.png)

## 完全アンインストール
こちらの記事を書いている最中、Android Studioを壊してしまったので完全アンインストール方法を探していたのですが
Windows、Mac共に削除だけだと消えないそうなのでまとめました。
再インストール前に全ての環境を初期化したい場合は下記を実行すれば全削除を行うことができます。

### Windowsの場合
[Android studioを完全にアンインストールしたい。](https://teratail.com/questions/56913)

下記フォルダを削除すれば設定を削除して初期化を行う事が可能

```shell:
# Android SDKのインストール先を変更している場合、下記フォルダではなくANDROID_HOMEのパスを確認する
C:/Users/【ユーザ名】/AppData/Local/Android/sdk
# .AndroidStudioX.Xはバージョン番号によってフォルダ名が異なる
C:/Users/【ユーザ名】/.AndroidStudioX.X
C:/Users/【ユーザ名】/.gradle
```

### Macの場合
[MacでAndroidStudioを完全アンインストール](https://qiita.com/nagaoyuriko/items/f310b595ff16061e1186)

Android SDKを削除する場合のコマンドは`rm -r ~/Library/Android*`だが、インストール先を変更している場合はANDROID_HOMEのパスを確認すること

# Xcode
## インストールまで
`App Store`を起動して`Xcode`で検索して「インストール」をクリック
![Xcode_install_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/aead3a1a-9831-a75d-cd93-95b3cffa1946.png)

インストールが完了後、初めて起動する場合はライセンス規約が出るので「Agree」をクリック
![Xcode_install_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/664723f0-4ed4-2428-4fc0-2bc5c6f95893.png)

## シミュレータの起動
### Xcodeでの起動
「Xcode」、「Open Developer Tool」、「Simulator」をクリック
![simulator_iOS_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/a3a6d203-8c2a-9d1e-1901-6e95f97e0da6.png)

しばらくするとOSが起動するので動作を確認し、正常に動くことを確認する
![simulator_iOS_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/c163150f-ad15-37ce-c058-aeb187819315.png)

### Android Studioでの起動
**※Flutterの各種設定が終了後に実行可能**
画面右上のデバイス表示部分をクリック後、「Open iOS Simulator」をクリック
しばらくするとXcodeでの起動と同じく、エミュレータが起動する
![simulator_iOS_AndroidStudio_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/c5e844f8-7743-be1f-b77c-2b5851619bb8.png)


# Flutterインストール

## SDKインストール

[Flutter公式](https://flutter.dev/)にアクセスして「Get started」をクリック
![Flutter_SDK_install_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/db0d11fd-f77c-2685-558a-2e587fccb683.png)

対応するOSの部分をクリックして以下のファイルをダウンロード
Windows: `flutter_windows_v1.5.4-hotfix.2-stable.zip`
Mac: `flutter_macos_v1.5.4-hotfix.2-stable.zip`
![Flutter_SDK_install_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/464f82bb-7da8-759d-f488-008635a6c05e.png)

**Windowsの場合**
ダウンロード後に解凍して任意のフォルダに入れる
今回は`C:/develop`配下に格納した

格納後、環境変数`Path`に`C:/develop/flutter/bin`を追加する

**Macの場合**
ダウンロード後に解凍して任意のフォルダに入れる
今回は`/Users/ユーザフォルダ/develop`配下に格納した

格納後、パスを通すために`.bash_profile`を編集してパスを追加する

```shell:
# vimで.bash_profileを編集する
vim ~/.bash_profile

# 実行直後にiキーを押して挿入モードに移行後、以下の行を追加
# 追加後にEscキーを押してノーマルモードに戻った後、:wqで保存してvimを終了させる
export PATH="$HOME/develop/flutter/bin:$PATH"
```

完了後、.bash_profileを再読み込みする

```shell:
source ~/.bash_profile
```

## 実行確認
完了したら正常にパスが通っていることを確認する

```shell:
flutter --version

# パスが通っていたら以下のような出力が行われる
Flutter 1.5.4-hotfix.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7a4c33425d (9 weeks ago) • 2019-04-29 11:05:24 -0700
Engine • revision 52c7a1e849
Tools • Dart 2.3.0 (build 2.3.0-dev.0.5 a1668566e5)

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool anonymously reports feature usage statistics and crash    ║
  ║ reports to Google in order to help Google contribute improvements to       ║
  ║ Flutter over time.                                                         ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ║                                                                            ║
  ║ Use "flutter config --no-analytics" to disable analytics and crash         ║
  ║ reporting.                                                                 ║
  ╚════════════════════════════════════════════════════════════════════════════╝


```

## Android Studioプラグインインストール
「ファイル」もしくは「Android Studio」から「環境設定」をクリック

「プラグイン」タブをクリック
![Flutter_plugin_install_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/c6b65a3f-dbde-29bc-ae4d-25a964f2d2a3.png)

上の検索欄に`Flutter`を入力してEnterキーを押すとプラグイン一覧が検索されるので`Flutter`をインストール
※`Flutter i18n`は多言語対応プラグイン
![Flutter_plugin_install_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/9d27841b-f242-d863-c0ad-5b3ce94b88d3.png)

インストールが完了したら「Restart IDE」をクリックしてAndroid Studioを再起動
![Flutter_plugin_install_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/4cf4a86f-c5ba-9752-495b-bca3aaa9dc22.png)

## Flutterプロジェクト作成

### 新規にプロジェクトを作成する場合
「ファイル」、「新規」、「New Flutter Project」をクリック
「Flutter Application」をクリックして「次へ」をクリック
![Flutter_Project_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/63f6c0c5-0c7e-7939-879a-f5e02a335ca0.png)

「Flutter SDK path」で先程設定したFlutterのフォルダを指定して「次へ」をクリック
![Flutter_Project_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/349cff3a-cdc1-04df-ab17-cdb9026eb2de.png)

「完了」をクリック
![Flutter_Project_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/2a1409a5-d11e-8a0a-68e7-b09ce34aa0f8.png)

### 既存のFlutterプロジェクトを開く場合
既存のプロジェクトをインポートして開いた場合、`Dart SDK is not configured`と表示されることがある
この場合、FlutterとDartのSDKへのパスが設定されていないのでパスを設定する
`Dart SDK is not configured`横の「Open Dart settings」をクリック
クリック後、SDKのパスを設定するウィンドウが開かれるので`Flutter`と`Dart`のSDKに下記を設定する
Flutter: `【インストール先】/flutter`
Dart: `【インストール先】/flutter/bin/cache/dart-sdk`
![SDK_import_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/1c2e99e8-e626-b34e-ec6c-0144d13cdc0f.png)

設定後、「OK」をクリックすれば環境チェックが行われる

### インポート後にエラーが出る場合

#### `'package get' has not been run`と出力される
「表示」、「ツール・ウィンドウ」、「ターミナル」とクリック後に下記コマンドを実行する
※flutterコマンドが見つからないというエラーが発生する場合はFlutterの環境変数に誤りがある

```shell:
flutter packages get
```

**`Waiting for another flutter command to release the startup lock...`と表示されて進まない**
プロセスがロックされてしまっている
[flutterコマンドを打った時に"Waiting for another flutter command to release the startup lock..."が出た時の対処法](https://qiita.com/konifar/items/29f2ed4bcc2a970014c1)

`【FlutterSDKのパス】/bin/cache/lockfile`を削除して再実行
※プロセスが全て終了していることを確認すること

## プロジェクト起動後に実行すること(初回のみ)
`flutter doctor`を実行してセットアップを完了するために必要なプラットフォームの依存関係があるかどうかを確認する
基本的には下記のように、実行するべきコマンドが表示されているのでコピーして実行する

```shell:
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
    • Android SDK at /Users/【ユーザ名】/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    # エラー個所は✗、警告箇所は!で示される
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
```

### `Xcode installation is incomplete`というエラーが発生する

Xcodeをインストールしただけではコマンドラインツールのバージョンが古いままになっている
下記コマンドを実行してコマンドラインツールのバージョンを更新する

```
[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
```

エラーを解消後、再度`flutter doctor`を実行して全ての項目に`✗`が付くことを確認する

# アプリケーション実行

## Androidでの実行
※Android Studioを実行してプロジェクトを開いていること

Androidデバイスを接続するかエミュレータを起動後、画面右上の「▶︎」をクリックしてFlutterプロジェクトを実行する
![Flutter_Project_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340824/73a7e037-4cbd-29ab-3dd8-cb40b3cd26ed.png)

## iOSでの実行
※Android Studioを実行してプロジェクトを開いていること

**Android Studio**でiOSのエミュレータを起動後、画面右上の「▶︎」をクリックしてFlutterプロジェクトを実行する

# Flutterアップデート

Flutterのバージョンを更新したい場合は以下のコマンドを実行する

```
flutter upgrade
```

# 最後に
Android及びiPhoneの開発経験はあまりないので手順を忘れそうだと思いまとめました
割と突貫で書いているので誤字などあるかもしれません

# 参考

[MacでAndroidエミュレータが起動しない(HAXMが起動しない)とき](http://mocotan.hatenablog.com/entry/2018/01/28/072658)
[Intel Hardware Accelerated Execution Manager（HAXM) インストールとアンインストール](https://zero0nine.com/archives/2753)
[Android Studio / IntelliJ IDEA の日本語化と設定](https://qiita.com/cypher256/items/a87179fbe8dd7f63ec4e)
[MacでAndroid Studioを日本語化する](http://shinsuke789.hatenablog.jp/entry/2018/08/27/130714)
[Windowsで高速AVDを利用するまでの手順をものすごく詳しく解説](https://qiita.com/keicha_hrs/items/fd714fe6cf38b5b3fbf8)
[Android studioを完全にアンインストールしたい。](https://teratail.com/questions/56913)
[MacでAndroidStudioを完全アンインストール](https://qiita.com/nagaoyuriko/items/f310b595ff16061e1186)
[flutterコマンドを打った時に"Waiting for another flutter command to release the startup lock..."が出た時の対処法](https://qiita.com/konifar/items/29f2ed4bcc2a970014c1)