Flutterの開発環境(Windows + Android Studio)を構築する

# 概要

Windows PC上にFlutterの開発環境を構築したときのメモになります。

**環境**

* Windows 10 Professional 1903
* Flutter SDK 1.9.1
* Android Studio 3.5.1

**参考**

* [Install - Flutter] (https://flutter.dev/docs/get-started/install)
* [Android Emulator 上でアプリを実行する - Android Studio ユーザーガイド] (https://developer.android.com/studio/run/emulator)

# Android Emulatorのハードウェアアクセラレーション

『[Android Emulator のハードウェア アクセラレーションを設定する] (https://developer.android.com/studio/run/emulator-acceleration)』を参考にハードウェアアクセラレーションの設定を行います。
これはハードウェアに依存するので、下記の設定が必要かどうかは開発PCにより変わります。

> [Windows で VM アクセラレーションを設定する] (https://developer.android.com/studio/run/emulator-acceleration#accel-vm)
> 
> Windows 上の VM アクセラレーションでは、Intel Hardware Accelerated Execution Manager（HAXM）か Windows Hypervisor Platform（WHPX）のいずれかのハイパーバイザを使用できます。

上記に引用したとおり、WindowsではHAXMとWHPXの2種類のハイパーバイザがあり、私が使用している開発PCではWHPXは使えなかったためHAXMを使うことにしました。以降はHAXMを使うための設定になります。

## Intel CPU VT-xの確認

使用しているPCのCPUがIntel製の場合、CPUがVT-x (Intel Virtualization Technology)に対応しているか『[使用中のプロセッサーはインテル? バーチャライゼーション・テクノロジーに対応していますか?] (https://www.intel.co.jp/content/www/jp/ja/support/articles/000005486/processors.html)』というIntelのサイトで調べることができます。（最近のIntel CPUではほぼ対応しているようです。）

対応している場合でもBIOS上で無効になっていることがあるようなので、BIOSセットアップ画面で有効になっていることを確認します。
確認できたらWindows起動後に[VirtualChecker] (https://openlibsys.org/index-ja.html)というツールで改めて確認します。
下図は私のPCの状態です。（後述のHyper-Vが有効になっていると`Enabled`にならないため、Hyper-Vを無効にした後の図です。）

![virtualchecker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/956b0d50-c1c9-13ac-f415-1f834c5c9894.png)

**VT-xとは**

> [インテル バーチャライゼーション・テクノロジー - Wikipedia] (https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%83%86%E3%83%AB_%E3%83%90%E3%83%BC%E3%83%81%E3%83%A3%E3%83%A9%E3%82%A4%E3%82%BC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%BB%E3%83%86%E3%82%AF%E3%83%8E%E3%83%AD%E3%82%B8%E3%83%BC)
> インテル バーチャライゼーション・テクノロジー（Intel Virtualization Technology、Intel VTまたは単にVTと略される）とは、インテルによって開発された仮想化支援技術のことである。

> VT-x は、Intelによるx86仮想化の実装例である。単に Intel VT と呼称する場合もある。

## Hyper-Vの無効化

WindowsのVMアクセラレーションでHAXMを利用する場合、Hyper-Vを無効化する必要があるため、以下の手順でHyper-Vを無効化します。

`コントロールパネル`を開き → `プログラム` → `プログラムと機能` → `Windowsの機能の有効化または無効化` → `Hyper-V`のチェックを外します。
![Hyper-V.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/851575e8-3c9e-0867-d26a-949bb9029f51.png)

また、Windows ハイパーバイザー プラットフォーム(WHPX)が有効化されている場合、これも無効化します。
![hypervisor-platform.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/ec2b679b-4f87-82d5-f6bf-aa0e9fd78d1d.png)

設定を変えたらWindowsを再起動します。
なお、アプリケーションの動作確認に実機を利用する場合はとくに気にする必要はないようです。

# Flutterのインストール

> [Windows install] (https://flutter.dev/docs/get-started/install/windows)
>
> System requirements
> 
> * Tools: Flutter depends on these tools being available in your environment.
>  * Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)
>  * Git for Windows 2.x, with the Use Git from the Windows Command Prompt option.

上記に引用したとおり要件としてPowerShell 5.0以上、およびGit for Windows 2.xが必要なのでインストール（されていなければ）します。（インストール方法は割愛します）

## PowerShell

```powershell
PS> $PSVersionTable

Name                           Value
----                           -----
PSVersion                      6.2.2
PSEdition                      Core
GitCommitId                    6.2.2
OS                             Microsoft Windows 10.0.18362
Platform                       Win32NT
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0…}
PSRemotingProtocolVersion      2.3
SerializationVersion           1.1.0.1
WSManStackVersion              3.0
```

## Git for Windows

```powershell
PS> git --version
git version 2.22.0.windows.1
```

## Flutter SDK

[Flutter SDK releases] (https://flutter.dev/docs/development/tools/sdk/releases)よりWindows版の最新リリース（この時点では`v1.9.1+hotfix.4`）のzipファイルをダウンロードし適当なディレクトリに展開します。
なお、下記に引用したように管理者権限の必要なディレクトリへは展開してはいけないということです。

> do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges).

この記事では下記のディレクトリへ展開し、D:\flutter\binを環境変数PATHに通しました。

```
D:\flutter
```

## flutter doctorの実行

この時点で`flutter doctor`を実行してFlutterの開発環境の状態を確認します。`X`や`!`の箇所が問題が指摘されているの項目です。この後解決していきます。

```powershell
PS> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.9.1+hotfix.4, on Microsoft Windows [Version 10.0.18362.418], locale ja-JP)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[!] Android Studio (not installed)
[!] IntelliJ IDEA Ultimate Edition (version 2019.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[√] VS Code, 64-bit edition (version 1.39.0)
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.
```

### JDK 1.8

開発には不要ですが後述するAndroidライセンスに同意する操作でJDK 1.8が必要になるので事前にインストールし、且つbinディレクトリを環境変数PATHに通しておきます。

なお、Android Studioで開発する分にはJDK 1.8は不要なようなので「Androidライセンスに同意する操作」のときだけ環境変数PATHを書き換えています。

# Android Studioのインストール

[Download Android Studio and SDK Tools] (https://developer.android.com/studio)よりインストーラ（このときは`android-studio-ide-191.5900203-windows.exe`というファイル）をダウンロードしてインストールします。

## Android Studio

インストーラを実行してインストールします。
インストールが完了すると`Android Studio Setup Wizard`という画面が立ち上がります。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/d10d6600-c37d-9aff-e069-04bd7f51d0ea.png)

設定は以下の内容で行いました。

Install Typeはcustomを選択しました。（インストール先を変えるため）
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/175b34d5-9112-a721-d09a-994b3db5f33d.png)

UIテーマはダークモードにしました。
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/4a205ed2-4231-7306-a73d-251bcab35852.png)

Android SDK Locationは図の場所(`D:\dev\Android\Sdk`)に設定しました。
また、Android SDK Locationを環境変数ANDROID_HOMEに登録します。

```
ANDROID_HOME=D:\dev\Android\Sdk
```

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/0756b9ca-752a-16da-e8b1-2d0f34104ca1.png)

エミュレータが使用できるメモリ量を設定します。
<font color="red">※この設定はすでに廃止されていて意味がないそうです</font>
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/9e0ed278-0958-27dd-6cf9-2c18f27ee9d8.png)

`Finish`ボタンをクリックして設定を開始します。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/77033271-b701-17d8-00b8-967e92c4bc83.png)

設定が完了したら`Finish`ボタンをクリックします。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/50d22c74-5e8c-1902-5cdd-2f779b0e43ae.png)

Android Studioが立ち上がりWelcome画面が表示されます。次は右下の`Configure`から設定を行います。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/90c2b167-062f-3308-89ae-96798d8d43bd.png)

## Android SDKの確認

`Welcome画面` → `Configure` → `SDK Manager`

SDK Managerでは特に設定する項目はありませんが、設定内容に一通り確認しておきます。

**SDK Platforms**
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/91ad0476-d2d7-908a-d1fa-0f1c4190f131.png)

**SDK Tools**
この画面でツールのインストール・アンインストールが行えます。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/70e91fe3-3f7e-67de-f821-d24045335f49.png)

## HAXMの確認

Android Studioをインストールすると同時にIntel HAXMがインストールされます。インストールが成功しているか以下のコマンドで確認することができます。

```powershell
PS> cd D:\dev\Android\Sdk
PS> .\emulator\emulator.exe -accel-check
Warning: Quick Boot / Snapshots not supported on this machine. A CPU with EPT + UG features is currently needed. We will address this in a future release.
accel:
0
HAXM version 7.5.2 (4) is installed and usable.
accel
```

STATEが`4 RUNNING`となっていればHAXMプロセッサが実行されています。

```powershell
PS> sc query intelhaxm

SERVICE_NAME: intelhaxm
        TYPE               : 1  KERNEL_DRIVER
        STATE              : 4  RUNNING
                                (STOPPABLE, NOT_PAUSABLE, IGNORES_SHUTDOWN)
        WIN32_EXIT_CODE    : 0  (0x0)
        SERVICE_EXIT_CODE  : 0  (0x0)
        CHECKPOINT         : 0x0
        WAIT_HINT          : 0x0
```

なお、アンインストールするときはAndroid Studioとは別に行います。
![haxm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/d5383344-8eb4-05db-fea6-e4439381ef10.png)

## Flutter, Dartプラグイン

`Welcome画面` → `Configure` → `Plugins`

Flutterの`Install`ボタンをクリックしてFlutterプラグインをインストールします。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/23008fb8-01e5-f7f9-8072-7e7a5b2ce88f.png)

途中でDartプラグインをインストールするか聞かれるので`Yes`ボタンをクリックしてインストールします。
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/a65c9cb0-b07c-e026-8e1d-325c5e534d6f.png)

## Androidエミュレータの設定

`Welcome画面` → `Configure` → `AVD Manager`

Android Virtual Device Managerが立ち上がるので`✚ Create Virtual Device...`をクリックします。
![avd_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/840182e7-000a-a8bd-4f42-027f03aea111.png)

Select Hardwareでデバイスを選択します。ここでは`Pixel 3`を選択しました。
![avd_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/43376266-ae53-3968-3d2a-d88d353a3f06.png)

System Imageを選択します。ここでは`Q、API Level 29、Target Android 10.0`の`Download`リンクをクリックしてSystem Imageをダウンロードします。
![avd_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/26d9b7ce-b3be-03bc-f718-f04699c4fbef.png)

License Agreementで`Accept`にチェックを入れ、`Next`ボタンをクリックします。
![avd_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/5d461fa1-97b5-0344-b1ed-298296f2a948.png)

インストールが始まります。（しばらくかかります）
![avd_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/b89988ba-9866-73d4-4480-1033f4066fae.png)

ダウンロードが完了したら`Finish`ボタンをクリックして前の画面に戻ります。
![avd_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/65956a49-f36d-842b-1187-0baed39264aa.png)

System Imageの画面に戻ったら`Next`ボタンをクリックします。
![avd_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/69cb385b-6e35-feba-9d2d-40ef8557350e.png)

ここで細かい設定が可能ですが、今回はこのまま`Finish`ボタンをクリックして完了します。
![avd_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/7dd65e68-7d83-f8d5-96cb-4a22eccaaf20.png)

設定が完了すると図の画面になります。試しにActions欄の右向き三角アイコンをクリックしてエミュレータを起動します。
![avd_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/f05b3bb0-9ffd-e5c4-1022-809f05dcc3cf.png)

Androidエミュレータが立ち上がった状態です。終了するときは右側に表示されてる縦長のメニューバーの×マークをクリックします。
![avd_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/9cc70ff6-da4d-14e4-1944-86591c2974fa.png)

以上でAndroidエミュレータの設定は完了です。

## Androidライセンスの同意

Androidエミュレータを新規・追加でインストールした後は、以下のコマンドでAndroidライセンス
に同意する操作を行います。
途中で何回かy/nを入力する場面がありますがライセンスに同意する場合はyを入力します。

```powershell
PS> flutter doctor --android-licenses
```

なお、JDK 9以上では下記のように失敗します。

```powershell
PS> flutter doctor --android-licenses
A newer version of the Android SDK is required. To update, run:
D:\dev\Android\Sdk\tools\bin\sdkmanager --update
```

```powershell
PS> D:\dev\Android\Sdk\tools\bin\sdkmanager --update
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
        at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
        at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
        at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
        at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
        at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
        at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:583)
        at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)
        ... 5 more
```

## flutter doctorの実行

先ほど`flutter doctor`を実行したときに指摘された問題が解決できたか再度実行します。

```powershell
PS> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.9.1+hotfix.4, on Microsoft Windows [Version 10.0.18362.418], locale ja-JP)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Android Studio (version 3.5)
[!] IntelliJ IDEA Ultimate Edition (version 2019.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[√] VS Code, 64-bit edition (version 1.39.0)
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.
```

IntelliJ IDEAとConnected deviceに`!`マークが付いていますが、IntelliJ IDEAは使用しないので無視します。
Connected deviceは、コマンド実行時にエミュレータを含むデバイスが繋がっていなければこのように表示されるので問題ありません。

ちなみにエミュレータを起動した状態でコマンドを実行すると下記のように表示されます。

```
[√] Connected device (1 available)
```

# デモアプリケーションの実行

Android Studioを起動しWelcome画面の`Start a new Flutter project`をクリックします。
![fp_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/1deb008a-bbe4-7565-e11a-4b9ce81c9fb5.png)

`Flutter Application`をクリックします。
![fp_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/ba68384f-6405-a7b7-77e9-4d53ce9a860b.png)

Flutter SDK pathが空欄なので、先ほどインストールしたFlutter SDKのディレクトリを選択します。
![fp_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/346eee88-e5d3-20d8-4a15-098ff6656239.png)

ここはそのままで`Finish`ボタンをクリックします。
![fp_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/198d8f4a-d74a-5b6a-ef94-52fd361561be.png)

開発画面です。デモコードがありますがそのままでアプリケーションを実行してみます。
![fp_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/3a8022b7-2db5-668f-23d3-46cc1fa554e3.png)

デバイスを選択します。（先ほど登録したAndroidエミュレータです）
リストから`Open Android Emulator: Pixel 3 API 29`を選択するとAndroidエミュレータの起動が始まります。
![fp_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/fab654bb-13d0-5730-2e01-0cd30d60e24e.png)

Androidエミュレータが起動すると`<no devices>`が`Android SDK build for x86 (mobile)`に変わります。
右側にある右向きの三角アイコンをクリックしてアプリケーションを実行します。
![fp_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/710b841b-67b9-3549-22fd-f33047c29595.png)

Androidエミュレータ上でデモアプリケーションを実行した様子です。
右下のプラスアイコンをクリックするたびに中央の数値がインクリメントされます。
![fp_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/f7ddcf38-fd5e-3385-dee2-6b4bb890d0e1.png)