Flutterを学ぼうpart1(環境構築編)

タイトル通り最近流行り？のFlutterの勉強をしたいなと思い、いろいろ触っていこうかと思います。
Flutterは1つのソースコードでiOS/Android/Webアプリが同時に開発できるみたいですね！
その辺もまだまだ知識不足ですが、いろいろと触りながら学んでいきたいと思います。

## 環境準備
取り合えず必要なものは以下です。
・Flutter SDK
・Android Studio

それぞれインストール、設定を行っていきます。
#### ■Flutter SDK
**①Flutter SDKをダウンロード**

下記公式サイトから
https://flutter.dev/docs/get-started/install
自分はWindowsなのでWindows版をダウンロードしました。
![Flutterインストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/c04ce560-a132-5b56-9145-412fcaad5528.png)
## ↓
![Flutterインストール2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/eb9842db-0d0a-00f3-1f0d-d0a29b10128d.png)

**②Flutter SDK解凍**
先ほど①でダウンロードしたファイルを任意のフォルダに解凍します。
![Flutterインストール3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/5d27a07a-fe24-d3a1-b455-43c8cf902306.png)

**③Flutter SDKのパスを通す**
解凍したFlutterフォルダの直下にbinがあります。
![Flutterインストール4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/d383e654-4b4b-16b3-a9e5-24192f15d20e.png)

**④flutter doctorコマンドで必要な環境を確認**
Windowsであればコマンドプロンプトなどを開いて、パスを通したFlutterのbinフォルダに移動(GitBushなどでも可)
そこでflutter doctorを実行すると環境構築で他に何が必要かが表示されます。
・```cd ~~~\flutter_windows_2.2.3-stable\flutter\bin```　
※自身が解凍したFlutterのbinフォルダ
・```flutter doctor```
![Flutterインストール5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/d86b65a1-72e5-543d-5131-de2d9568299f.png)
足りないツールや設定があれば赤文字でx、黄色文字で!などで表示してくれます。
***
#### ■Android Studio
**①Android Studioインストーラをダウンロード**
https://developer.android.com/studio/?hl=ja#downloads
自分のOSやbitバージョンにあったものをダウンロードしてください。
今回はWindows(64-bit)をダウンロードしていきます。
![Android Studioインストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/533d98ce-580b-3f8e-6989-3a3f3700886e.png)

**②Android Studioインストールを実行**
先ほどダウンロードしてきたインストーラを実行してインストールを開始します。
![Android Studioインストール2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/8b92f0f5-95d2-c88c-395f-69c39d303408.png)

特に設定などは変える必要はないので、説明に従って完了まで進めます。
![Android Studioインストール3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/edb1ee94-5285-2798-ba66-ae5c8d82f123.png)
↓
インストールが完了したら```Start Android Studio```にチェックを入れてFinishボタンを押下
![Android Studioインストール4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/0c25c2ed-7d37-f4a3-9b97-e698a76fda38.png)
自動でAndroid Studioが立ち上がります。

**③Android Studioのセットアップ**
Android Studioが立ち上がったら、必要な設定などはないので説明通り進めていきます。
![Android Studio設定2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/3ce593d6-455b-18ba-4408-94ad8bef0d33.png)
↓
![Android Studio設定3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/05658dc8-11b3-bfd5-c4a4-ded0b0e517a1.png)

セットアップを進めていくと Welcome to Android Studio の画面に遷移します。

**④Flutterプラグインのインストール**
Welcome to Android Studio画面左側のPluginsを選択
![Android Studio設定4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/876f556d-ea50-4fd6-eeae-2858daf5beeb.png)

検索からFlutterを検索してインストールします。
![Android Studio設定5.png.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/62b17768-9695-1fb2-f56e-e48d8705c6c7.png)
インストールが完了したらAndroid Studioを再起動してください。

**⑤Android SDK Command-line Toolのインストール**
Welcome to Android Studio画面で、More ActionsからSDK Managerを押下します。
![Android Studio設定10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/55ff4495-74e1-62ed-d6a7-d57eea765d77.png)

Android SDK のSDK Toolsタブを選択。
Android SDK Command-line Toolにチェックを入れてOKボタンを押下。
![Android Studio設定9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/388ab539-c658-b8d1-c13f-af3c3900bd20.png)
Android SDK Command-line Toolのインストールはこれで完了です。

**⑥Androidライセンスを承認する**
ここまでの設定を完了してから、もう一度コンソールで```Flutter doctor```コマンドを実行すると、
先ほどxがついていたAndoroid toolchainが!になっているはずです。
![Android Studio設定7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/cbfdf850-88df-51e1-6b19-9d8b48b5750e.png)


確認出来たら、```flutter doctor --android-licenses```コマンドを実行してライセンスの認証を実施します。
諸々同意など求められますがすべてy(yes)でOKです。

**⑦Android Studioのパス設定**
再度```Flutter doctor```を実行するとAndroid Studioの箇所に黄色い!がついてて、not installedと表示されることがあります。
あれ、、Android Studioさっきインストールしたのになぁ、、
![Android Studio設定11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/cd5d011d-4bef-4285-31fc-1c2c6a5fa89f.png)
Flutter側にAndroid Studioを認識させる必要があるみたいです。
Flutterのconfigコマンドでパスの設定をしましょう。
```$ flutter config --android-studio-dir="C:\Program Files\Android\Android Studio"```
※自身がAndroid Studioをインストールしたフォルダを指定して上記コマンドを実行

最後に```Flutter doctor```を実行。
すべて緑色の√になりNo issues found!と表示されれば環境設定は完了です！
![Android Studio設定12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/045cf844-7684-a3df-5b07-429b8dfc3cb1.png)

## まとめ
まっさらな状態からでも必要なものはだいたいFlutterが準備してくれているので、環境設定はそんなに複雑ではなかったです。
少し長くなってしまったのでいったんここまでにして、次回は動作確認をしてみます！

#### ■次回
https://qiita.com/hiropin_hirotan/items/d454c76a751836cf8e42