WindowsでのFlutter環境設定

現在フロントエンドとはかけ離れたところに生息中の私にとって、フロントエンド開発は完全に趣味化しています。

Reactメインで勉強していましたが、もう趣味なので、他の言語にも触れようということで、

なぜか**Flutter**を入れてみた。🙄

いつも立ちはだかるセットアップ😓の部分をまとめます。

やや自流が入っているので悪しからずです。

&nbsp;

>目次
>・Flutterのインストール
>・Android Studioのインストール
>・まとめ


#Flutterのインストール

おなじみのインストール、

私の苦手なインストール。

公式見てやります。↓

https://flutter.dev/docs/get-started/install

![Flutter 2021-05-10 181527.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1139248/c8afef74-5506-34bd-20c4-08e9a1276075.png)
まずはWindows用の説明ドキュメントを見ます。

Flutter公式の説明文は英語のくせに、比較的読みやすいです。
&nbsp;
Microsoftのドキュメントのように吐き気はしないですね。


###インストール方法は2種類

A．SDKのZipファイルをダウンロードしてインストールする方法

B．Gitクローンしてインストールする方法

&nbsp;
Gitクローンの方がよかったなあと思いつつ、気づいたときにはZipファイルをダウンロードしてたので、Aの方法で話していきます。

&nbsp;
Zipファイルはダウンロード後、エクスプローラーのダウンロード下にあると思いますが、

解凍場所は、C:＞　ユーザー＞　User name　　配下にしました。

どこでも良いと思いますが、

「 C:\Program Files\　」 **以外**にしてね😭と公式に書いてあるので、そこには絶対入れないでおきましょう。
（理由は書いてないけれど、そういうものだと認識しました。）


この後、PATHを通す設定をするみたいですが、なぜかできなかったんですよね、、。

できない！

Ctrl ＋　Q　で「env」を打ち込み、環境設定を開いてPATHは通せるはずですが、なんだろう。


なので、公式の　Update Your Path　の部分は一旦飛ばします😇

&nbsp;

#Android Studioのインストール

続いて、Android Studioのインストールをします。↓

https://developer.android.com/studio?gclid=Cj0KCQjws-OEBhCkARIsAPhOkIa8IS0oAveA_LhwJqfzlwXvqKxndpWyiUJDpqmyqUPbh8c5eMuuMgIaAumVEALw_wcB&gclsrc=aw.ds

公式見てやります。

わぁ、**１G**あるじゃん、、と思いながらダウンロードです。

メモリの小さい私のPCでは既にここで時間がかかり始めたので、時間に余裕を持ってインストールしたいところですね。⏲

夕飯作り始めてしばらくしたら終わってました。

&nbsp;

###ダウンロード後に設定が必要

1番はじめにAndroid Studioを開いたときに右下の「Configureボタン」をクリック。

Plugin（プラグイン）をクリック。

Flutterをクリック。　Dartも入れますか？とかいう画面も出てくると思いますが、Yesで進めましょう。


そうすると、
![android_flutter_path 2021-05-09 195259.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1139248/7ecde6d0-91bb-d053-5acf-9ea45ca7de56.png)

FlutterのSDKのPathはどこですかね？と聞かれるので、この時、Pathを指定です。

Flutter公式で「　flutter\bin　」がどうのと書かれているけれど、ここで設定するのは、解凍したZipファイルの**flutter**フォルダです。
![android_flutteeeeeer_path2 2021-05-09 195614.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1139248/21f00162-c087-d70a-fcb2-28de96e4508a.png)
↑このように、「 flutter\bin 」 フォルダを指定すると次のようにエラーになります。
![android_flutter_path_error2021-05-09 195955.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1139248/fd349d69-67a8-90b2-9a71-85ffbd4fad7d.png)


とりあえず、ここで詰まなければ次に進めます。

flutterのプラグインが設定完了すると、

　+ Create New Flutter Project  が追加されていることでしょう。↓
 ![android_flutter 2021-05-09 195226.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1139248/1ec06f80-4b86-80cc-de4a-b5436e952d28.png)


一番初めに開くと、プロジェクト名をつける画面になりますが、
![android_f_name 2021-05-09 200521.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1139248/ec7b255e-ea89-f10d-9af9-567559cdb10f.png)

Flutter_app　と書いたら、、

![android_f_name_error 2021-05-09 200631_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1139248/51f0750e-c5e4-2237-16c8-3bcc850995c5.jpeg)

エラー。

Dartで使われる名前だから使わないでと。

😐すみません…
&nbsp;

Organizationsはドメインがあれば変えていくとのことですが、ローカル開発はじめましての今は、このままデフォルトで進めます。

スクショではJavaになっていますが、デフォルトはKotlinなので、Kotlinで行きましょう。

![android_studio_1 2021-05-09 200808.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1139248/4c7f3c98-83ab-633a-1e84-8f32bb0350b7.png)

Android StudioでFlutterのプロジェクトが開きました！


&nbsp;

この後、Android　のデバイス設定やAndroid　エミュレーターのAVD Managerの設定が必要になっていきます。


&nbsp;

とりあえず、FlutterとAndroid Studioがインストールできたので今回の記事は以上にしておきます。





##まとめ

最後が尻切れトンボになってしまいましたが、ここまでできたら、あとは公式ドキュメントを見て気合で頑張りましょう。

ただ、Windowsの環境変数のPath設定は良かったのかと不安しかないですし、PowerShellでコマンド操作できるか心配ですが、それも含めて乞うご期待な感じです。

Reactにまた戻っているかもしれないですね。

もうあくまで趣味化しているので憐れんでほしい。

以上でーす！🤗✨

誰かの参考になれば幸いです。