Flutter を VSCode で環境構築してみた！＜Windows編＞ 

みなさん、はじめまして。
以前開発エンジニアとして働ていたキャリアがあったものの、
転職をきっかけにしばらく開発の分野から遠ざかっていた現在40代前半の人です。

最近、改めて開発エンジニアとして頑張ってみようと思い、
とりあえずアプリ開発で利用することになる「Flutter」を「VSCode」を利用して開発できる環境を作ってみました。

この記事は、自分の作業記録として残そうと思って記事を初めて記事を投稿してみましたが、
良かったら同じように環境構築をしようとしている方々の手助けになれば幸いです。

ちなみに、私が本記事を記載は以下の記事となります。（ありがとうございます！）

https://qiita.com/apricotcomic/items/7ff53950e10fcff212d2

# 1. 構築環境
* Windows 11
* VS Code ※これからインストール
* Android Studio ※これからインストール

# 2. 「Flutter」のダウンロード
下記公式サイトから「Flutter」をダウンロードします。
※私が今回構築する環境は「Windows」となるので、下記画像の赤枠をクリックします。
https://docs.flutter.dev/get-started/install
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/04a9e1b1-8586-5659-aa4f-b14c147f7dba.png)

そうしたら、以下の画面に遷移します。
選択肢として
* Desktop
* Android ※Recommended
* Web
が表示されるので、今回は「Android Studio」を利用する想定もあるので、推奨となっている「Android」を選択しておきます。

■ 原文
> Your choice informs which parts of Flutter tooling you configure to run your first Flutter app. You can set up additional platforms later. If you don’t have a preference, choose Android.

■ 翻訳
>選択によって、最初の Flutter アプリを実行するために Flutter ツールのどの部分を構成するかが決まります。後で追加のプラットフォームをセットアップできます。特にこだわりがない場合は、Android を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/f96c3149-fc98-ef18-fec0-2842cc2ceb7a.png)

次の画面に遷移後、画面を少し下の方にスクロールし「Install the Flutter SDK」の個所を探します。
その後、「Download and install」のタブの方を選択し、zipファイルのダウンロードボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/eb24d3d0-2f51-ef9b-457f-6a4264d5cbb2.png)

クリック後にダウンロードが実施されるので、ダウンロードが完了するまでいったん待ちましょう。（約1～2分程度）
ダウンロードしたzipファイルは、自分が管理しておきたい所に移動した後、次の手順で利用するので保存した場所はシッカリと覚えておきましょう！

# 3. 実行「PATH」の設定
先ほどダウンロードしたzipファイルを展開し、自分が管理したい場所に移動しましょう。
私は「C:\Program Files」の配下に置いておきました。
「コマンドプロンプト」や「Power Shell」上でコマンドが認識できるように、環境変数の「PATH」に設定を追加していきましょう。

Windowsのバージョンが変わるたびに、「システムのプロパティ」の画面を開く場所が解らなくなるので、画像付きで繊維方法を残しておきます。（今回は「Windows11」のUIバージョン）
1. まず「Windows」のロゴマーク上で右クリックを実施し、「システム」のメニューを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/6aa5bc63-a4e1-4ef1-c7ea-3a0e34c4018e.png)

2. 開かれた画面上の「システムの詳細設定」をクリックしたら、「システムのプロパティ」画面が表示されるので、「環境変数」のボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/1d856b71-f9b1-2829-e7fd-a613b44a2e52.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/a6ebc6e1-f393-1bc8-064c-1d2fda2cc390.png)

3. 環境変数の画面で「システム環境変数」側の「Path」を選択して「編集」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/3088edd2-ce09-5aa9-cf5a-62d7bb769f09.png)

4. 新規にzip回答後に配置した「flutter\bin」のパスを追加して「OK」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/90a61962-166f-e068-dc8d-e7d2a37a2058.png)

Pathを設定（通す）と、「flutterコマンド」が「コマンドプロンプト」または「Power Shell」で利用できるようになります。
コマンドが利用できるようになっているか、試しに以下のコマンドでバージョンを表示してみましょう。

`flutter --version`

■ コマンドプロンプト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/6e8e0e3e-f8f0-a2ef-c930-d3dae64c99be.png)

■ Power Shell
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/9467a008-8196-764e-7e61-2e03fd5446f1.png)

# 4. 「flutter doctor」コマンドでセットアップ完了に必要な依存性の確認
以下のコマンドを実行して、セットアップの完了に必要な依存性を確認する事が可能です。

`flutter doctor`

<details><summary>私の環境での実行結果 ①</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/b5146195-a4e9-187f-e617-33c86a8dae7d.png)

```rb
PS C:\Users\★★★> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.4, on Microsoft Windows [Version 10.0.22621.3296],
    locale ja-JP)
[✓] Windows Version (Installed version of Windows is version 10 or higher)
[✗] Android toolchain - develop for Android devices
    ✗ 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/docs/get-started/install/windows#android-setup for
      detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✓] Chrome - develop for the web
[✗] Visual Studio - develop Windows apps
    ✗ Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its
      default components
[!] Android Studio (not installed)
[✓] Connected device (3 available)
[✓] Network resources

! Doctor found issues in 3 categories.
```
</details>

* [✓] ： 設定完了済み
* [!]　： インストールが必須ではないが、設定が未完了の状態
* [✗] ： 設定が未完了

実行結果として「Android toolchain」と「Visual Studio」のセットアップが不完全の状態であると出力された。
※今回は「Visual Studio」の代わりに「VS Code」を利用する予定ですが、エラーの内容が「Visual Studio」となっているので、エラーの内容に従い順番にインストールを進めていくことにします。

# 5. 「Android toolchain」のインストール
まず最初の[✗]の項目となっている「Android toolchain」をインストールしていきます。

■ 原文
>✗ 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/docs/get-started/install/windows#android-setup for
　 detailed instructions).
　 If the Android SDK has been installed to a custom location, please use
　 `flutter config --android-sdk` to update to that location.

■ 翻訳
>✗ Android SDK が見つかりません。
　Android Studio を次からインストールします: https://developer.android.com/studio/index.html
　初回起動時に、Android SDK コンポーネントのインストールを支援します。
 (または https://flutter.dev/docs/get-started/install/windows#android-setup にアクセスしてください詳細な手順)。
　Android SDK がカスタムの場所にインストールされている場合は、次を使用してください。
 `flutter config --android-sdk` を使用してその場所に更新します。

エラーの内容に記載されている通り、下記のURLにアクセスしてインストールを進めていきます。

* https://developer.android.com/studio/index.html

インストール手順については、下記の記事を参考にさせていただきました。（ありがとうございます！）

https://qiita.com/okada_ryo/items/0434ccf8d66f7859f75c

ダウンロードからインストール完了までの時間はだいたい以下の通りです。

* ダウンロード：2～3分
* インストール：8～10分

「Android Studio」のインストール完了後に、改めて「flutter doctor」コマンドを実行して状態がどのように変化しているかを確認してみましょう。

<details><summary>私の環境での実行結果 ②</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/ff8e8554-b34f-b57d-fce3-e6634ed889a9.png)

```rb
PS C:\Users\tmss_> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.4, on Microsoft Windows [Version 10.0.22621.3296],
    locale ja-JP)
[✓] Windows Version (Installed version of Windows is version 10 or higher)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more
      details.
[✓] Chrome - develop for the web
[✗] Visual Studio - develop Windows apps
    ✗ Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its
      default components
[✓] Android Studio (version 2023.2)
[✓] Connected device (4 available)
[✓] Network resources

! Doctor found issues in 2 categories.
```
</details>

そうすると「Android toolchain」の状態が[✗]から[!]に変化している。

まだセットアップ完了の状態にはなっていないので、引き続き警告メッセージに従った対応を実施していきます。
なお、対応の進め方は下記のサイト（「Android toolchainのインストール」の部分を参照）を参考にさせていただきました。（ありがとうございます！）

https://book-reviews.blog/set-up-flutter-development-environment-using-flutter-doctor/

■ 原文
>✗ cmdline-tools component is missing
　Run `path/to/sdkmanager --install "cmdline-tools;latest"`
　See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
　Run `flutter doctor --android-licenses` to accept the SDK licenses.
　See https://flutter.dev/docs/get-started/install/windows#android-setup for more
  details.

■ 翻訳
>✗ cmdline-tools コンポーネントがありません
　`path/to/sdkmanager --install "cmdline-tools;latest"` を実行します。
　詳細については、https://developer.android.com/studio/command-line を参照してください。
✗ Android ライセンスのステータスは不明です。
　「flutter Doctor --android-licenses」を実行して SDK ライセンスを受け入れます。
　詳細については、https://flutter.dev/docs/get-started/install/windows#android-setup を参照してください。
　詳細。

# 6. 「Android SDK Command-line Tools」のインストール
Android Studioを起動して（プロジェクトが開かれている時はいったんクローズしてください）、「Projects」⇒「SDK Manager」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/6501b7f0-baa1-8511-23bc-54500b5c05f7.png)

「Settings」画面が表示されるので「Languages & Frameworks」⇒「Android SDK」⇒「SDK Tools」の項目を表示します。下に表示される一覧の中に「Android SDK Command-line Tools (latest)」の項目が存在するのでチェックを入れ、右下の「Apply」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/22b89c6b-bdb8-66ab-f1a0-2a370241bf2b.png)

さらに確認画面が表示されるので「OK」をクリックします。
するとダウンロードとインストールが始まるので、完了したら「Finish」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/16615198-7c16-3c2c-3026-6ba663981b13.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/63f3c85e-b14e-4ba2-3363-e2b19790a8ed.png)

# 7. ライセンスの同意
もう一つの警告メッセージの内容の通り以下のコマンドを実行します。

`flutter doctor --android-licenses`

何回（5回ほど）か同意のメッセージが表示されるので、「y」を入力しつづければ問題ありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/af030d36-2284-01fc-1e9e-191d9e55174a.png)

これで「Android toolchain」のセットアップは完了です。

# 8. 「Visual Studio」のインストール
同じように警告メッセージに従った対応を実施していきます。

参考程度に下記のサイトも少し参考にして進めてみました。（ありがとうございます！）

https://qiita.com/Toshiaki0315/items/adeb29caa4b63051b8ba

■ 原文
>✗ Visual Studio not installed; this is necessary to develop Windows apps.
　Download at https://visualstudio.microsoft.com/downloads/.
　Please install the "Desktop development with C++" workload, including all of its
　default components

■ 翻訳
>✗ Visual Studio がインストールされていません。これは Windows アプリを開発するために必要です。
　https://visualstudio.microsoft.com/downloads/ からダウンロードします。
　「C++ によるデスクトップ開発」ワークロードを、そのすべての機能を含めてインストールしてください。
　デフォルトのコンポーネント

 エラーの内容に記載されている通り、下記のURLにアクセスしてインストールを進めていきます。
 今回は無料のコミュニティ版を使用していくため、コミュニティの「無料ダウンロード」をクリックします。

* https://visualstudio.microsoft.com/downloads/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/7875acf1-c81e-cf29-f9f9-c6d7f39bf2b9.png)

ダウンロードファイル（VisualStudioSetup.exe）を実行してインストールを実施した後、以下のような画面が表示されますが、「C++」によるデスクトップ開発とモバイル開発を選択してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/1c41676c-6d3a-0c6c-81a9-e948e321d4a0.png)

これで、すべてのセットアップを完了しました。

<details><summary>私の環境での実行結果 ③</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/22519737-fc5d-48b2-16aa-799619ecdb45.png)

```rb
PS C:\Users\tmss_> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.4, on Microsoft Windows [Version 10.0.22621.3296],
    locale ja-JP)
[✓] Windows Version (Installed version of Windows is version 10 or higher)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.4)
[✓] Android Studio (version 2023.2)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!
```
</details>

# 9. 「VS Code」のインストール
「VS Code」のインストールについては、下記の記事を参考にさせていただきました。（ありがとうございます！）

https://qiita.com/YurimyMiyu/items/5ce7821f1e3e5905c3ee

# 10. 「VSCode」に「Flutter」をインストール
「VSCode」に「Flutter」のプラグインをインストールして使えるようにします。
左メニューの「extensions（拡張機能）」を開いて、検索欄に「flutter」と入力して検索してみましょう。
検索結果で表示された、flutter関連のプラグインの中で一番上の「Flutter」と表示されている箇所の青い「install」ボタンをクリックしましょう。
それで、インストールが実施されます。
他にも関連するプラグインが表示されていますが、必要に応じでインストールを実施してみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/d89f1bbf-e8f4-826c-c53e-35b1685c2bae.png)

これで必要なインストールはすべて完了しました。

# 10. 「VSCode」上で「Flutter」を実行してみる
## 10.1. 新規プロジェクトを作成
とりあえずテスト用のプロジェクトを作成するために、プロンプト上で下記のコマンドを実行します。

`flutter create test`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/ed661029-e3f4-197f-25dc-a7f051062b7e.png)

そうすると、新規のFlutterプロジェクトが作成されます。

## 10.2. プロジェクトを読み込む
作成したプロジェクトを、VSCode上で開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/81e7883f-24f3-e716-8029-9becb3f14a2e.png)

作成したプロジェクト（フォルダ）を選択して開いた後、「main.dart」ファイルを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/2ec85ffc-81f8-6549-fec4-e434d1ea472a.png)

作成したプロジェクトを実行するには、ソース上の「Run」をクリックします。
そうすると、しばらくしてChrome上でアプリが実行されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/5bf43c54-a8a5-5e05-776b-8e2b3ddb900f.png)

画面の右下にある「＋」をクリックすると中央の数字がカウントアップするようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/68b7f180-d4b7-6682-0913-4f19293d2ded.png)

ちなみに、VSCodeの右下にdeviceを表示している箇所があるのでそこをクリックしてみます。
すると、デバイスを入力できる窓が画面上部に表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/0c00c1c0-05ab-28bf-dd99-d010f6e9d0e9.png)

とりあえず、デフォルトで存在しているEmuratorを選択した後、改めて「main.dart」ファイル内の「Run」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/1c96d97b-e8b4-788a-cc6f-ec01b9763230.png)

そうすると、Androidの画面が表示され、その中で動作している状態を確認する事ができます。（Chromeのアプリ内で表示ができます）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755252/2a3904b2-ae4a-3e4f-f3bc-4d140fc3dc8b.png)

なお「Create Android Emurator」をクリックして様々な機種のEmuratorを作成する事も出来るはずですが、この記事の内容では割愛させていただきます。

# 最後に
とりあえず「Flutter」に関してもまだよく解らない状態のまま、開発環境の構築方法だけを記事としてまとめてみましたが、これから始めようとしている初心者の方々の手助けになれば幸いです。

また、私の記事は **「自己学習用」** としてまとめているので、記載している内容に不備があっても責任は負いかねますのでご了承ください。