Windows で Flutter の環境構築をした備忘録


## インストール手順

- 基本的には [オフィシャルドキュメント](https://flutter.dev/docs/get-started/install/windows) 通りにやればOKですが、WSL2を有効にした状態だとハマったので備忘録がてら残します

### 1. Git for Windows のインストール

https://git-scm.com/download/win こちらからダウンロードしてインストールをすれば良いのですが、[winget](https://devblogs.microsoft.com/commandline/windows-package-manager-preview/) でもインストールが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/476a2f2d-c000-a6f0-7466-0d4480fe02d2.png)

### 2. Flutter の インストール

コマンドプロンプト or Power Shell を起動し、 C:\src に 今回は Flutter をインストールしております。
※ C:\Program Files 等にはインストールをしないようにします。詳細は[オフィシャルドキュメント](https://flutter.dev/docs/get-started/install/windows) を参照

```powershell
mkdir C:\src
cd c:\src
git clone https://github.com/flutter/flutter.git -b stable
```

Flutterのコマンドを使えるように PATH を通します。

##### 1. システム環境変数の編集をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/5a93e16b-c2ab-ad7a-b3c6-45bacf21110c.png)
##### 2. 環境変数(N) をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/eb608b62-3c01-9b7c-e4a5-270a292abeb7.png)
##### 3. Path を選択して、編集をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/c2b15091-6724-f684-81d6-83226994258e.png)
##### 4. 新規をクリックをし、Flutter をインストールした場所 C:\src\flutter\bin を入力します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/8e3f4832-1594-f24f-bd8b-d90503457c85.png)
これで flutter コマンドにパスが通ったので、以下のコマンドを実行します。

```powershell
flutter doctor
```

初めて flutter を実行した場合は、必要なSDKやモジュールのダウンロードが走ります。
最後に doctor の結果が表示されますが、まだ Flutter 以外はインストールされていないので無視してOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/3559d93e-de4e-9d70-2852-d97adf1ace7a.png)

### 3. WSL2 と Android Studio (Androidエミュレーター)を共存させる方法

WSL2 を利用していない人はここの項目はスキップしてください。

WSL2を利用している状態で、Android Studio (Android エミュレーター) のインストールの時に、エラーになりました。
スクショを取り忘れたのですが、**「Hyper-VをOffにしてください」**というような内容です。

私のwindows環境では、WSL2 を利用していたため、Hyper-V が有効になっておりました。
色々調べてみると、オフィシャルドキュメントに対応方法が載っており、この通りにやれば解消しました。

[Windows Hypervisor Platform を使用する VM アクセラレーションを設定する](https://developer.android.com/studio/run/emulator-acceleration?hl=ja#vm-windows-whpx)

##### 1. デスクトップの windows アイコンを 右クリックし、「アプリと機能(F)」をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/fc941fdb-b5ca-b931-e211-cf7111c340cb.png)
##### 2. 関連設定にある「プログラムと機能」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/7fced7a9-a7d0-38cc-6ac2-b17feb9a4d81.png)
##### 3. Windowsの機能の有効禍または無効化をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/1528ae50-dc18-8732-0f5d-7cf375336aed.png)
##### 4. Windows ハイパーバイザーのプラットフォーム に チェックを入れて、「OK」ボタンをクリックをする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/07192ba1-4b73-9f71-a37d-b3edf90494a7.png)
##### 5. パソコンを再起動

### 4. Android Studio のインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/e9010933-9032-8df3-1d11-36a9166219d3.png)
[Android Studio](https://developer.android.com/studio)
上記のページより、最新版をダウンロードします。(今回は4.1.1)
ダウンロードしたら、インストーラーに従ってインストールをしていき、終わったら Android Studio を起動してください。

#### Android Studio の設定 と Demoアプリの起動

以下の手順で Flutter の plugin をインストールをします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/f39ed42b-2c13-9d18-e806-ba122b33233b.png)
Flutter で検索をして、Install をしていきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/545025ac-d6d5-2ea5-753f-f045f3b25a50.png)

Create New Flutter Project をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/5c125e3a-5898-a963-6a7d-77fa71a1a179.png)
Flutter Application を選択して Next をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/29a387d0-df3a-9f1d-69e7-b509e493ec83.png)
Flutter SDK path が ブランクの場合は Flutter のインストールパスを入れて、Nextをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/a7eb0f20-ad08-bb2c-6acb-73641fd82458.png)
この辺はとりあえずデフォルトのままで Finish をクリックして終わります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/e5dd9f2b-9ba5-7ee1-5876-95b464acbb4f.png)

コードは一旦そのままで、エミュレーターを起動してみるとこんな風に画面が表示されればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/2c1af57a-4d3a-9602-ba21-0d019b3b177f.png)