2週間で4回のFlutter環境構築を行なった駆け出しエンジニアが書く　Flutter環境構築Windows編

Flutterでアプリ開発をするためには、環境構築が必須ですが、
自分のWindows10の調子が悪く、2週間で４回も環境構築を行いました。
そのため、WindowsでのFlutter環境構築はお手のものです！

この記事ではWindowsでのFlutter環境構築の手順を記載します。

## 目次

- 前提条件
  - Flutter SDK をインストール
  - 環境変数設定
- Android Studio セットアップ
  - Android Studio インストール
  - Android Studio 初期設定
  - Android Studio に Flutter プラグインインストール
- Android 設定
  - cmdline-tools をインストール
  - ライセンスを承認する

# 前提条件
Windows 10 Pro 64bit
プロセッサ：Intel Core i7
※Chrome と VSCode はインストール済み
Flutter: 3.0.0-stable
Android Studio: Chipmunk 2021.2.1 for Windows 64-bit
Visual Studio: Community 2022 (17.2.1)

## Flutter SDK をインストール
まずは Flutter の SDK をダウンロードします
DLサイト => https://docs.flutter.dev/get-started/install


Windows を選択
![スクリーンショット 2023-08-02 18.02.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/abd55118-12a2-c594-0f07-97cb36c18799.png)


SDK を選択
![スクリーンショット 2023-08-02 18.03.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/da37dd3e-ca6d-5858-6c20-502a16a736a8.png)


C:\src ディレクトリを作成しておく
![スクリーンショット 2023-08-02 18.03.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/1ba834fb-f02b-0076-951a-1e92de77b996.png)

ダウンロードした zip ファイルを解凍して、 c:\src に配置する
![スクリーンショット 2023-08-02 18.03.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/1505f991-5621-2653-3d04-02fcd47163e2.png)

## 環境変数設定
Windows => 設定 を開きます
![スクリーンショット 2023-08-02 18.10.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/bff252f0-9b51-deaa-4779-aa2611db498e.png)


「env」で検索し、「環境変数を編集」を選択します
![スクリーンショット 2023-08-02 18.10.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/5213631d-10a6-5c81-8c81-34ff5b079a27.png)


「新規」 => 新しいユーザー変数 で以下を登録し、「OK」をクリックします
![スクリーンショット 2023-08-02 18.10.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/d0002e1d-6284-5596-f215-81edf04d772a.png)


変数名： FLUTTER_PATH
変数値： C:\src\flutter
![スクリーンショット 2023-08-02 18.10.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/f13e53a2-608f-4ed4-5085-4aa80288f0e5.png)


「Path」を選択し、「編集」をクリック => 「新規」をクリック => 「%FLUTTER_PATH%\bin」を追加 => 「OK」をクリックして登録します
![スクリーンショット 2023-08-02 18.10.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/b9f59e5b-6162-b54f-cd20-28c447f1144c.png)


「OK」をクリックして閉じます
![スクリーンショット 2023-08-02 18.10.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/d8c4def3-d131-558a-1285-bd5d6e4f7322.png)


Windows + R で「cmd」を入力し、コマンドプロンプトを開きます
![スクリーンショット 2023-08-02 18.11.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/674a34ad-75ad-f3fe-9e40-3a0394d20bf8.png)

「flutter doctor」コマンドを実行して、結果が出力されれば OK です
![スクリーンショット 2023-08-02 18.11.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/d22ddba2-09f8-5beb-faca-935fd3f04291.png)

# Android Studio セットアップ

## Android Studio インストール

Android Studio をダウンロードします
DLサイト => https://developer.android.com/studio
![スクリーンショット 2023-08-02 18.18.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/75e271f6-1fcf-5b2e-54a8-da2b3e15a8e1.png)



インストールします
![スクリーンショット 2023-08-02 18.17.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/6241afdf-bbae-4613-0bf2-f16ca4ba54fc.png)
![スクリーンショット 2023-08-02 18.17.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/42a6118a-7ca6-1a10-2a74-cca1f816405b.png)
![スクリーンショット 2023-08-02 18.17.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/1b2afdf4-7a13-990f-d79f-c708d7277ec6.png)
![スクリーンショット 2023-08-02 18.17.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/91fe1ebd-8cf0-18af-1d6a-cedf4cc5b5c7.png)
![スクリーンショット 2023-08-02 18.17.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/51d800d7-5191-1a59-492c-03f69c7aaa7d.png)
![スクリーンショット 2023-08-02 18.17.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/2a6c277f-44c8-5a5f-270d-74d827e4e748.png)
![スクリーンショット 2023-08-02 18.18.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/f7f0f597-49e3-e76c-4aef-692c092c6df4.png)

## Android Studio 初期設定

引き続き初期設定を実施します。
既存の Android Studio の設定を引き継ぐかどうかは、どちらでも良いです
![スクリーンショット 2023-08-02 18.23.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/7f1404eb-1715-74ee-3589-a6f9070bc92f.png)


Google に統計情報を送るかは、どちらでも良いです
![スクリーンショット 2023-08-02 18.23.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/3db71018-5780-c213-3104-8ba87bed6aee.png)


基本設定で Standard を選択して進めていきます
![スクリーンショット 2023-08-02 18.23.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/1e9bf655-121f-b913-5b1f-be22f925d4f6.png)
![スクリーンショット 2023-08-02 18.23.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/c448bf76-78d1-382f-323e-b8ea6acffe08.png)



テーマはお好みで選んでください
![スクリーンショット 2023-08-02 18.23.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/258fe7f4-6d82-1422-919c-6989a93b560c.png)



内容を確認して Next をクリックします
![スクリーンショット 2023-08-02 18.24.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/176d3e10-99c2-8a58-05a0-ede6f2cc3de8.png)



Accept を選択して、 Finish をクリックします
![スクリーンショット 2023-08-02 18.24.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/bcaa342f-d3eb-125b-c9f8-537cd7289239.png)
![スクリーンショット 2023-08-02 18.24.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/a8e30171-d83b-38f1-455e-924b1cccae09.png)

## Android Studio に Flutter プラグインインストール
左メニューの「Plugins」を選択し、「flutter」で検索して、インストール
![スクリーンショット 2023-08-02 18.29.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/d835fbfe-389b-0dd4-d58e-7d5d51d7c908.png)
![スクリーンショット 2023-08-02 18.29.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/42b557af-7361-69a0-2c72-7663568603f1.png)


インストールが終わったら再起動をする
![スクリーンショット 2023-08-02 18.29.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/a9f0f78c-66f1-1585-39c7-c7cd897d8dff.png)

## Android 設定
Android toolchainのエラーに対処していきます
![スクリーンショット 2023-08-02 18.31.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/80eefa4a-3b13-f844-a6b4-c54025e4dc82.png)

## cmdline-tools をインストール
More Actions から「SDK Manager」を選択します
![スクリーンショット 2023-08-02 18.32.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/9b7b9bab-7659-505e-af7d-dadedb29cd10.png)

「Android SDK Command-line Tools」にチェックを入れて「OK」をクリックします
![スクリーンショット 2023-08-02 18.32.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/4df7ffde-4bf6-b9e3-bb0a-bf528ce105d6.png)
![スクリーンショット 2023-08-02 18.32.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/a59d89be-8083-4fb5-31c4-699e8fc3fd06.png)
![スクリーンショット 2023-08-02 18.32.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/d7552a17-de73-d430-76f6-74c9edf0b022.png)

## ライセンスを承認する
以下のコマンドを実行し、入力を求められたら「y」で承諾します

`flutter doctor --android-licenses`
![スクリーンショット 2023-08-02 18.34.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/22c42361-24f8-edb2-1d38-6485fb5152d0.png)
再度 flutter doctor をして、チェックマークになっていれば完了です