FlutterをAndroidStudio(Windows)にインストールしてデモアプリを実行するまでやってみた

##はじめに
FlutterをWindowsにインストールしたのでメモとして残したいと思います。
何番煎じの記事かわかりませんが、version違いとかで少しずつ違ってたりするので誰かのお役に立てれば幸いです。

##環境
Windows 10
Android Studio 3.5
Flutter Windows 1.12.13

##やってみる
基本的にはGoogleの[公式ドキュメント](https://flutter.dev/docs/get-started/install/windows)に沿ってやっていきます。

###まずはSDKをダウンロード
公式ドキュメントからSDKをダウンロード
![flutter_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/1573e0d5-7ade-850a-3b9f-131a125e6d2a.png)
zipを解凍し、適当な場所に配置します。
`C:\Program Files\`には置くなって書いてあるので、`C:\`の下に適当なフォルダを作ってその中に置いておきました。

###環境変数を変更
画面左下のWindowsマークをクリックし、`env`と検索
そうすると`システム環境変数の編集`というのが表示されると思うので、そちらをクリックして実行

`hogeのユーザー環境変数`の中に`Path`という項目があるので選択し、`編集`をクリック
こちらに先ほどインストールした`flutter/bin`のPathを新規に追加します。
そしたらOKを押して、環境変数のウィンドウを閉じます。

###flutter doctor実行
左下のWindowsマークをクリックし、`コマンドプロンプト`と検索し、実行します。

コマンドプロンプト内でインストールしたflutterのディレクトリに移動し
以下のコマンドを実行

```
C\hoge\flutter> flutter doctor
```

そしたらいろいろと怒られました。

```
[√] Flutter (Channel stable, v1.12.13+hotfix.7, on Microsoft Windows [Version 10.0.18363.592], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Android Studio (version 3.5)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.41.1)
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available
```

とりあえず2番目の項目は`flutter doctor --android-licenses`を実行しろといってるので
いわれるがままに実行

```
C\hoge\flutter> flutter doctor --android-licenses
```

いろいろと規約のようなものが記載されてるので、内容を確認してAcceptしていきましょう。
すべてAcceptしたのちに再び`flutter doctor`を実行すると、2番目の項目も`[!]`が`[√]`へと変化していました。

###デバイスを接続する
3番目と4番目の[!]はひとまず置いておいて、5番目の`[!] Connected device`を解決します。

といっても有効なAndroidの端末を接続するだけです。

スマホとPCを接続します。
この時、スマホを**開発者モード**にし、**デバッグを有効**にした状態にします。
この状態で再び`flutter doctor`のコマンドを実行すると、デバイスが認識されているかと思います。

デフォルトじゃないSDKをターゲットとしたい場合はまた環境変数をいじらなきゃいけないようですが今回は省略します。

###AndroidStudioにFlutterとDartをインストールする
先ほどのコマンドプロンプトの3番目の項目を見てみると
AndroidStudioにFlutterのpluginとDart(言語)のプラグインがインストールされていないと書いてあります。
早速インストールしていきたいと思います。

Android Studioのインストールに関しては今回割愛します。
ちなみに今回はver3.5のAndroidStudioをインストールしました。

AndroidStudioを起動し、画面上部のFileタブからSettingsを選択します。

以下のようなウィンドウが表示されたら、サイドバーから**Plugins**を選択し、画面上部の**Marketplace**を選択。
検索窓で**Flutter**と検索し、**Flutter**をインストールします。
インストールが完了するとプラグインを有効にするためにAndroidStudioの再起動を促されますので従いましょう。

![flutter_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/f3f9015a-657b-32f3-a786-817146680daa.png)


ちなみにインストール完了後に再びコマンドプロンプトで`flutter doctor`を実行すると
2番目の`[!] Android Studio (version 3.5)`の項目も解決されているかと思います。

##アプリ作成
###プロジェクト作成
インストールが完了したので実際にアプリを作ってみましょう。
AndroidStudioを起動し、画面上部のFileタブからNew>**New Flutter Project**を選択します。
1.Flutter Applicationを選択
![flutter_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/07bc0c22-d344-bbf1-999d-44369a8d3de5.png)

2.FlutterのSDKの場所と、プロジェクト名およびその保管場所を指定してあげます。
　SDKの場所は**序盤でインストールしたディレクトリ**を指定してあげればOK
![flutter_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/c06cb3a9-0476-b555-aa50-986b2af9a931.png)

3.ドメインを入力し、**Finish**をクリック
![flutter_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/f89cb9f7-4ff8-a7cf-8b38-be942c5b6f2f.png)

これでFlutterのデモアプリのプロジェクトが完成しました。

###アプリ実行
プロジェクトを開いたら早速実行してみましょう。

AndroidStudioの右上に、接続されているAndroidの端末が表示されているかと思います。
その隣あたりにある**Runボタン**をクリックし、アプリを実行します。
![flutter_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/4fe18f14-f35f-011a-6cb8-2c68d8f6177d.png)

初回実行時は時間がかかるかと思いますが、端末上でアプリが実行されれば成功です。
右下のプラスボタンを押すと数字がカウントアップされていく簡単なデモアプリですね。

![flutter_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/50ab9e56-4cb8-2047-b611-d72c34c3ea5a.png)



##最後に
Flutterのインストールの一連の流れをまとめてみました。
Googleのドキュメントをなぞっただけですが、役に立てれば幸いです。
もし誤りなどありましたらご指摘お願いします。