Windows10上にFlutterの開発環境を構築する。

## はじめに
ネイティブアプリの開発に少し興味が出て、最近クロスプラットフォーム開発のフレームワークで有名なFlutterを試しに使ってみようと思った。スペック的にかなり不安があるが、ひとまず手持ちのWindowsPCを使ってエミュレータ上でサンプルを動かすところまでやってみたので、その時のメモを残す。


## 実行環境
【ローカルPC-OS】
　　Windows 10 Pro　
　　Git for windows 2.29.1
　　VScode 1.50.1


## 本記事の流れ

１．Flutter SDK のインストール
２．Android Studioのインストール　
３．VScodeにプラグインのインストール
４．Flutterプロジェクト作成前の最終確認
５．Flutterプロジェクトの作成

## １．Flutter SDK のインストール

### 以下の公式サイトよりダウンロード
　https://flutter.dev/docs/get-started/install/windows


### ダウンロードしたzipパッケージを展開する
　※ここでフォルダ指定をするが、`C:\Program Files\`の様なアクセス権限固いところはできる限り避ける。


### 上記展開したフォルダについてPATHを指定
　Windows10proなので、システム ＞ システムの詳細設定 ＞ 環境変数 ＞ Pathの項目を選択して、`指定フォルダ\fultter\bin` を追加する。


### コマンドプロンプトよりちゃんとPATHが通っているか確認

```shell:コマンドプロンプト
$ flutter doctor

[√] Flutter (Channel stable, 1.22.6, on Microsoft Windows [Version 10.0.18363.1316], 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/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[!] Android Studio (not installed)
[!] VS Code (version 1.52.1)
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available
```


## ２．Android Studioのインストール　

### 以下の公式サイトよりダウンロード
　https://developer.android.com/studio?hl=ja#downloads

### ダウンロードしたexeファイルを実行
　基本的にデフォルトチェックのまま『Next』で問題ない。
　インストール先は`C:\Program Files\` の中で問題ない。

### 起動して初期設定を行う
　※Installerを閉じる時、Start--にチェックを入れていれば勝手に立ち上がる

設定ファイルは今回作成するため『Do not import settings』を選択する。
![Qiita-No028_img01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/871182d8-e2cf-32d8-cae8-d6ef290813ca.jpeg)

Welcomページが開かれるが、構わず『Next』をクリック。（画像なし）

Install Typeを聞かれるので、『Custom』を選択。
![Qiita-No028_img03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/b78e9234-99a6-4101-44ef-4587616340b9.jpeg)

JDKのフォルダパスを聞かれるため入力。
　※Android Studioのインストール先がデフォルトから変更していない場合は、恐らく下図の通り。
![Qiita-No028_img04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/50f77da7-3369-7f66-0365-2a4fbcbe20ae.jpeg)

UIのテーマを【ダーク】にするか【ライト】にするか聞かれるので、好きな方を選択。（画像なし）

インストールするコンポーネントを選択する。
　Android Virtual Deviceにチェックを入れる。CPUがIntelの人はHAXMにもチェック。
![Qiita-No028_img06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/8e21a446-d86d-de0c-22dd-630d39fda859.jpeg)

エミュレータに割り当てるRAMを設定。
![Qiita-No028_img07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/ca7835f5-5764-b8bc-b7ea-8423964a6de4.jpeg)

『Finish』をクリックすると、必要ツールのインストールが開始される。（画像なし）

### Android Studioを起動してエミュレータを使ってみる

Android Studioを起動して右下のConfigureか`AVD Manager`を選択
![Qiita-No028_img08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/9af3a251-b14c-05f8-b93e-623ace6be854.jpeg)

デフォルトでDeviceが登録されているので、試しにアクションの『△ボタン』よりエミュレータを起動してみる。
![Qiita-No028_img09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/7a11829a-113a-81e9-5e53-2a8c7d4d2417.jpeg)
　※エミュレータな重くて起動しない場合は、左下の『Create Virtual Device...』より低スペックのエミュレータを作成して、それで試してみる。


## ３．VScodeにプラグインのインストール

### Flutterをインストール
![Qiita-No028_img10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/9f7d8aba-3522-73b5-e835-8ab163e9c0cb.jpeg)
　※この後Dartもインストールしようとしたところ既にインストール済みとなっていた。Flutterのインストール時に一緒にされるっぽい。

###Flutter Widget Shippets もインストール
　※必須ではないが、開発する際に便利らしいのでインストールしておく。



## ４．Flutterプロジェクト作成前の最終確認

```shell:コマンドプロンプト
>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.6, on Microsoft Windows [Version 10.0.18363.1316], locale ja-JP)

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Android Studio (version 4.1.0)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[√] VS Code (version 1.52.1)
[!] Connected device
    ! No devices available

```

**大きく２つの問題が発生！**
① Androidライセンス契約に同意していない。
② Android StudioにFlutterやDartのプラグインがインストールされていないとのこと。
　　⇒ 今回はVScodeをつかうため、このエラーは問題なし。

```shell:コマンドプロンプト
$ flutter doctor --android-licenses
# 全て『y』でOK
・・・
・・・
All SDK package licenses accepted
```

```shell:コマンドプロンプト
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.6, on Microsoft Windows [Version 10.0.18363.1316], locale ja-JP)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Android Studio (version 4.1.0)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[√] VS Code (version 1.52.1)
[!] Connected device
    ! No devices available
```


## ５．Flutterプロジェクトの作成

### プロジェクト作成

VScodeを立ち上げ、`F1`で入力欄を表示させたら、そこで`>flutter`と入力。
出てきた候補の中から`New Application Project`をクリック。
![Qiita-No028_img11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/c5a4ecc9-3101-7072-d253-d7364fbb5e8b.jpeg)

プロジェクトを作成するフォルダを指定して、『Select a folder...』をクリック。
![Qiita-No028_img12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/3e6ae796-203b-1f4c-97f5-7e6cfea51507.jpeg)

プロジェクト名を入力すると、プロジェクトが作成され自動で開く。
![Qiita-No028_img13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/b87ce436-17ab-41a7-6840-2f524d4fa5c4.jpeg)


### エミュレータ上での起動確認

プロジェクト作成後、`main.dart`が開かれているので、右下の【No Devices】をクリックして、作成済みのエミュレータをどれか選択する。そうするとエミュレータが起動する。
![Qiita-No028_img14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/f7f2dcfb-d6b2-06b9-9283-52a3945c3780.jpeg)

エミュレータが起動した状態で、TERMINALから`flutter run`を実行すると、動くはず。（結構待つ）
![Qiita-No028_img15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/a9077e4d-261b-7c44-7f68-7a6caf93241a.jpeg)

下図の様に、サンプルのアプリが開けばOK！
![Qiita-No028_img16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/865ed4b0-7f29-2178-3046-2317b398df12.jpeg)


※デフォルトで用意されていたエミュレータは重かったので、動くレベルのエミュレータを作ってそこで動作確認してる。

## 補足

このPCスペックじゃ全然動かなかった・・・
![Qiita-No028_img17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/2bf017e0-4585-6047-71f5-51516d0a334a.jpeg)