Flutterの環境構築(Windows版)

## Flutterの環境構築の手順
- Flutter SDKのインストールとパス設定
- Android Studioのインストールとセットアップ
- Visual Studioのインストールとプラグイン追加
- Chromeのインストール ※インストール済みのため手順無し
- VSCodeのインストール ※インストール済みのため手順無し
- VSCodeにFlutterの拡張機能を追加
- 最終確認

# Flutter SDKのインストールとパス設定
(1) [Flutter公式サイトよりダウンロード](https://docs.flutter.dev/get-started/install)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/543a5abf-c87a-d2a0-ffe0-f5c3a7fba54c.png)
(2)任意のフォルダ(今回は『D:\dev』に設定)に圧縮ファイルを配置して、解凍する。
(3)システム環境変数の中にある「Path」を選択し編集を押下
(4)システム環境変数でOKを押して、登録完了
　参考：[環境変数設定 Windows10](https://www.scc-kk.co.jp/scc-books/java8_workbook/java_dev-win10.html)

# Android Studioのインストールとセットアップ
(1)[Android Studio公式サイト](https://developer.android.com/studio?hl=ja)からダウンロード
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/2578a1b4-d2ad-f929-d21b-9f8857144788.png)
(2)ダウンロードされたファイル「android-studio-～-windows.exe」
を実行して、Android Studioを配置する場所を決める
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/48de0cc8-73bb-77d7-ba57-736d248fe3e4.png)
(3)インストールが始まるので、完了したらFinishを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/6f88cad9-9073-72b8-c4ef-8cbe6635e342.png)
(4)『Do not inport settings』でOKを押下。次画面でDon't send を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/08e34b3b-25a5-5fae-b7e4-9b9aecb1fd97.png)
(5)NEXTを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/47536baf-cacc-c26f-7b62-fb028f6aaf60.png)
(6)licenseの項目すべてに対して、Acceptを押下する後、Finishを押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/e88cff23-748c-56b4-6974-b7a4b90ef2ae.png)
(7)Finishを押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/389907df-b123-41fc-2aa4-3753fec39205.png)
(8)More Action＞ SDK Manager を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/7ccc7d4d-d595-d66b-6c10-4afb28806330.png)
(9)Languages & Frameworks＞Android SDK＞タブ[SDK Tools] で
　Android SDK Command-Line Tools　を選択し、OKを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/76450d27-9e3e-5f10-5698-c1ba3097361e.png)

(10)ポップアップが出たらOKを押下。
　インストール終わったら、Finishを押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/f458fd5b-6f69-a3e6-0c7f-ab03c773c558.png)
(11)コマンドプロンプトを開き、「flutter doctor --android-licenses」を入力
「y」を入力する必要が何度かあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/c5f417e8-66ee-9900-b4ab-7cb652d1d2b1.png)
(12)Android Studio を開き、Plugins＞検索バーに「Flutter」を入力
＞Flutterを選択＞installを押下　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/10cc973f-3af5-d218-f4db-f95318cc6fda.png)
(13)設定完了。Android Studioを閉じる。

# Visual Studioのインストールとプラグイン追加
(1)[Visual Stadio公式](https://visualstudio.microsoft.com/ja/downloads/)から
Visual Stadioコミュニティをダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/e40a345a-5509-0823-e4ca-9de9e7085f4d.png)
(2)ダウンロードしたファイル「VisualStudioSetup.exe」を実行
続行を押下し、インストールが開始されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/49e0fd65-68ee-0ebc-84a0-064f14b4ea5a.png)
(3)インストール中に下記の画像のようなものが表示される
「C++によるデスクトップ開発」にチェック。インストールを押下。
補足：タブ[インストールの場所]で自分が配置したいディレクトリを設定で可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/da9e832d-ef24-f5f0-942a-685f9e374717.png)
(3)OKボタンを押下し、起動を押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/72fb9b18-9137-0bbd-1783-8407594b26af.png)
(4)今はスキップを選択し、右上の「×」ボタンで閉じる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/4cb9d874-a19d-553a-22a0-e8ffeb78656a.png)

# VSCodeにFlutterの拡張機能を追加
(1)VScodeを開く。
(2)左の拡張機能アイコン＞検索バーに「Flutter」を入力＞Installを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/f268975f-ecbb-bcda-c99c-95bcef9d2f0f.png)

# 最終確認
(1)コマンドプロンプトを開き、「flutter doctor」を入力。
 <b><font color="green">緑のチェックマーク</font></b> がつけばOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343155/65d28491-3a53-299a-de9a-d622a404717c.png)
#### **これでFlutterの環境構築はすべて完了になります**