VSCodeでHello Flutter

# 背景

下記でFultterをインストールできたので、次のステップとしてサンプルのアプリケーションを立ち上げてみました。
エディタは普段使用しているVSCodeを選択しました。

https://qiita.com/cremarch/items/de8c3e161d17b4e2f85a

# やったこと
1. Flutter拡張機能のインストール
2. Flutter拡張機能の設定
3. プロジェクトの作成
4. シミュレータで動作確認

## 1. Flutter拡張機能のインストール
VSCode左サイドバーの拡張機能タブから検索し、Flutter拡張機能をインストールします。
![flutter_0001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/90a248c5-404a-405a-8994-d09254b8552c.png)

## 2. Flutter拡張機能の設定
左下の歯車マークから`Settings`を選択します。
![flutter_0003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/00c13eec-cedb-4240-8ee5-d3200646a08a.png)

右上のページと矢印のアイコンを選択すると、settings.jsonの編集画面に遷移します。
![flutter_0004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/8f321f26-6602-44ba-a415-50a77933b692.png)

`"dart.flutterSdkPath": "{/path/to/flutter/sdk}"`を追加します。
筆者の環境では、`"dart.flutterSdkPath": "/Users/cremarch/fvm/default"`としました。
![flutter_0005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/2409e714-469e-4152-a902-2dc147541750.png)

## 3. プロジェクトの作成
コマンドパレットを開き、`Flutter: New Project`を選択します。
![flutter_0006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/40d86f19-5ebc-441b-bd29-1929f13b3548.png)

`Application`を選択します。
![flutter_0007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/7d3b8014-c3c1-4c2e-84de-95c3897cd994.png)

プロジェクトを作成する先のディレクトリを選択します。
![flutter_0008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/13556397-3ecb-4498-82e8-63a023a51dd9.png)

プロジェクト名を入力します。
![flutter_0009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/f92b2e08-c3f9-4225-b3b5-207f911e2692.png)

`Yes, I trust the authors`を選択します。
![flutter_0010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/d496c1a7-dc0e-499f-a93c-26d7500f6791.png)

雛形が作成されました。
![flutter_0011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/2bd4a3c4-534d-49dc-b5c0-fd1adf02201c.png)

## 4. シミュレータで動作確認
作成したアプリケーションをシミュレータで起動してみます。

左サイドバーからFlutter拡張機能のタブを選択します。
![flutter_0012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/b486bb2e-3f8d-439d-9995-d518c0569c2e.png)

右下の`Chrome(web-javascript)`を押下して、シミュレータのリストからStart `iOS Simulator`を選択します。
![flutter_0013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/317668fa-6193-4ebe-9209-dca5312c56a4.png)

シミュレータが起動しました。
この状態で右上のデバッグ開始ボタンを押下します。
![flutter_0014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/7b3fe86a-3ef8-4a53-84fe-cd0f6e5b8d80.png)

アプリケーションが起動しました🎉
![flutter_0015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/ae134ae8-493d-4fb7-99b7-3f54fcef9276.png)

### Appendix
Androidのシミュレータで動作確認
![flutter_0016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/d5584ca2-4743-494e-9c8c-062016733e1b.png)

mac OSのシミュレータで動作確認
![flutter_0017.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/b2642e8c-5914-4396-8042-bdfb55659a20.png)

webのシミュレータで動作確認
![flutter_0018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025461/74e92bf7-b8fb-46f6-a593-bacdc9de2222.png)

以上で、サンプルアプリケーションの動作確認ができました。

# 参考文献
https://fvm.app/documentation/guides/vscode