Flutter_開発準備

# Flutter_開発準備

Flutterを使用した開発環境の準備手順を説明します。

## Flutter
### ダウンロード
Flutter本家のページ。
https://flutter.dev/
上段の「Get started」をクリックし、ダウンロード画面に移動します。
![flutter_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/6b9d7c33-c2b2-3858-985c-c9025be9e1a5.png)

開発用のパソコンに合わせて選択します。
![flutter_2_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/b476ed85-03ff-02e0-d92a-3ae47c51caec.png)

「flutter_windows_v1.2.1-stable.zip」をクリックして、ZIPファイルをダウンロードします。
![flutter_2_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/b6daabc8-ab37-df6c-93c9-63ed338ac09d.png)


## Android Studio
### ダウンロード
アンドロイドの開発者コードのサイト。
上段のリンクから「Android Studio」をクリック。
https://developer.android.com/?hl=ja
![androidstudio1_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/024345ef-66e1-8d58-fe98-eadb9aef7ddb.png)


アンドロイドスタジオのページ。
ダウンロードのボタンをクリックします。
https://developer.android.com/studio?hl=ja
![androidstudio1_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/cccea46f-316c-3ded-fe65-f46cdee9e987.png)

ダウンロード時に同意が求められるので、内容を読んだうえで同意します。
![androidstudio1_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/91a2583f-db04-aa70-f06b-8a3dcc303cac.png)

### インストール
基本的にはそのまま「Next」をクリックして進んでしまって問題ありません。
![androidstudio_install_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/8e254893-86aa-cd16-1239-457ebfeb4796.png)
![androidstudio_install_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/9a025e22-54ed-a959-e2d8-6b06730af7ed.png)
![androidstudio_install_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/988ddb56-b8c2-10d4-cb76-26ad5bbf29b7.png)
![androidstudio_install_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/6d3a7eeb-4486-8126-e554-ea1a21770793.png)
![androidstudio_install_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/8eba922b-5271-e492-6645-6cbb2290bf2c.png)
![androidstudio_install_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/2a246d3f-d1d6-0b10-34a6-7c4f11329a91.png)
![androidstudio_install_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/d7f83470-526a-1b45-57f0-e299a3cf47af.png)
![androidstudio_install_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/b9800f58-faed-6430-d123-ea7a5b7dbc17.png)
![androidstudio_install_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/6be3d025-f12e-4ca2-6ee6-740eaab98004.png)
![androidstudio_install_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/8b6347d2-a3a7-6655-138f-ecaec6ffa5f0.png)
![androidstudio_install_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/32418fdf-b8a2-2e68-e2a0-4c9029a5de27.png)

好みに合わせて選択してください。
![androidstudio_install_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/66fdb78f-b1ed-5412-7222-3a08151c56bf.png)
![androidstudio_install_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/201ead65-8788-d28c-879f-7d1d5fe07cb6.png)
![androidstudio_install_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/521caf7a-93ea-74ca-f02f-f76d26087cf8.png)
![androidstudio_install_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/868a0599-bf36-4d02-fc78-3bc3fde2879f.png)



## Flutter
### 設定
![flutter_setting_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/bb25115c-caa0-cf24-1e43-e10b9389f4c7.jpeg)

![flutter_setting_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/badf8319-092c-29a4-7175-32de23911e42.jpeg)

「flutter doctor」コマンドを実行すると環境構築に何が足りていないか教えてくれます。
![flutter_setting_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/a99863b4-7433-dd14-792b-12544ca3619c.jpeg)

「flutter doctor --android-licenses」を実行して、androidライセンスに同意してね
と記載されているので、上記のコマンドを実行しましょう。
![flutter_setting_5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/3dfcad5f-206f-098c-d133-511126572a07.jpeg)

何度か同意されるか聞かれるので、
同意するよう「y」を入力して「Enter」キーを押してください。
![flutter_setting_6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/ec3a58db-3c56-0bf8-a49a-b43cda19be96.jpeg)

警告の1番上が解消されてたことが確認できました。
続いて警告になっている
 - Flutter
 - Dart
のプラグインがインストールされていない警告を解消していきます。
![flutter_setting_12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/c2ec39a5-90ac-8325-c0b8-38dc4db85ed6.jpeg)

インストールしたAndroid Studio を起動して、プラグインを選択します・
![flutter_setting_13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/699745fa-2729-69ab-eff8-feb349f7bfb2.jpeg)

「flutter」で検索してインストールします。
![flutter_setting_15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/7bdb2e4f-35f4-69c2-557e-503db6c5887d.jpeg)

再度「flutter doctor」で確認します。
![flutter_setting_16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/c3e902d0-a86c-1264-e419-1077ef89ebed.jpeg)

警告だった箇所が1つ解消されたことが確認できます。
なお、「No devices avalible」について、この時点で警告になっていて問題ありません。

# プロジェクトを作成

「Start new Flutter Project」 を選択
![flutter_use_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/7e11cabb-e8b8-d163-a9fa-f2159e23b745.jpeg)
![flutter_use_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/2136e785-7401-3aa0-46a0-fdc49ba23d9b.jpeg)

「FlutterのSDKのパスを指定してね」とエラーになっているので、
「Flutter」をダウンロードしたフォルダを指定します。
![flutter_use_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/f72d867f-1ad7-0895-4dd8-ed88bfad3905.jpeg)

![flutter_use_4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/ea3200a8-5979-d09a-4d33-966f49bb49a5.jpeg)
![flutter_use_5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/88adf315-886e-c588-7317-610afd320372.jpeg)

![flutter_use_6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/e1adbaa9-fc77-e996-301a-c08fb7904e7f.jpeg)

# 仮想デバイスを作成

この状態で実行使用とすると下記のエラーになるため、
仮想デバイスを作成します。

![flutter_use_6_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/0c4e2b3d-42d5-f601-e986-ccd7a454752b.jpeg)

![flutter_use_7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/68e89e5c-fdd7-31c7-c287-4870c93a8fd9.jpeg)

## 作成手順

![flutter_use_8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/608786a9-b22e-e32f-7c66-e974856f29d8.jpeg)

![flutter_use_9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/c4c315be-9266-f1e7-0808-db9b1e706481.jpeg)

![flutter_use_10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/cdf17207-c784-35a0-79e0-8abb58b3b3bf.jpeg)

![flutter_use_11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/ce7ba45f-47ac-1328-de90-b4f2fb1a7c22.jpeg)

![flutter_use_12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/6c19d09d-208d-4bfe-9866-8a8f3c964e90.jpeg)

![flutter_use_13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/843ec908-0e98-638d-dbd6-3346050cddf2.jpeg)

![flutter_use_14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/9b5e2fe5-696d-15ed-0e0c-81938ee194c1.jpeg)

![flutter_use_15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/3ea6cc42-52fb-e77b-aa45-08fbff635c33.jpeg)

以上で仮想デバイスの作成は完了です。
実行すると下記のようにスマホが表示されます。
![flutter_use_19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/292b7913-576b-fe29-6d56-e818e4332d61.jpeg)

## 仮想デバイスが実行できない場合
開発する環境によっては下記のエラーとなります。
その場合は「Windowsハイパーバイザープラットフォーム」を有効にしてください。
![flutter_use_16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/83e03aba-b417-27ad-e31b-f65d3076449c.jpeg)

![flutter_use_17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/a843dacd-8b53-7c14-d477-3aed3d4e1bc0.jpeg)

![flutter_use_18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/cc9395fc-ff00-c124-1b9c-03fd0fcfbeef.jpeg)