Flutter for Webの環境構築 with Mac, VS Code 

ネイティブアプリはやらないと各所で公言している身ですが、家庭の事情でやることになったので記録をしていきます。

今回のゴールはブラウザ（Chrome）上でFlutterのサンプルアプリが動いてるのを確認するまで。

## Flutter SDK のインストールと初期設定
MacはBrewでインストールするのがなんだかんだで楽ですね。

```terminal
$ brew install flutter
```

`zsh` 使ってて `zsh-completions` がインストールされていればコマンドの補完も効いて良いです。

```terminal
$ flutter
analyze          -- Analyze the project's Dart code.
assemble         -- Assemble and build flutter resources.
attach           -- Attach to a running application.
bash-completion  -- Output command line shell completion setup scripts.
build            -- Flutter build commands.
channel          -- List or switch flutter channels.
(以下略)
```

各種記事によると `flutter precache` と `flutter doctor` をやっとくといいらしいです。

```terminal
$ flutter precache
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.0, on Mac OS X 10.15.5 19F101 darwin-x64, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    (略)
[✗] Xcode - develop for iOS and macOS
    (略)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1.1)
[✓] VS Code (version 1.56.2)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.
```

ネイティブアプリやる気がない環境が露呈しました😇
でもWeb向けの開発ができると聞いているので放置です。

Web向けの開発設定を有効にします。

```terminal
$ flutter config --enable-web
```

設定できたかどうかは以下で確認できました。

```terminal
$ flutter config
Configure Flutter settings.

(Help的内容が続くので中略）

Run "flutter help" to see global options.

Settings:
  enable-web: true

Analytics reporting is currently enabled.
```

## サンプルアプリを動かす
予め開発用のワークスペース的なディレクトリを用意しておくことにしました。
ホームディレクトリ直下に開発プロジェクトを置くと散らかっちゃうので・・・

```terminal
$ mkdir ~/FlutterDev
```


`flutter create` で雛形が作れるようなのでそのようにします。

```terminal
$ cd ~/FlutterDev
$ flutter create webapp
$ cd webapp
```

そのままアプリを実行してChromeで表示します。

```terminal
$ flutter run -d chrome
```

![スクリーンショット 2021-05-28 7.48.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26501/121356bf-d397-5ccf-ce6a-84e12cdc7900.png)


とりあえず起動しました。

## サンプルアプリを編集する
業務では `IntelliJ IDEA` を使ってるんですが、社内で `VS Code` 利用者が増えてるのでキャッチアップも兼ねて `Flutter` での開発は `VS Code` を使うことにしてみようと思います。

`VS Code` を開いて `File > Open... > ~/FlutterDev/webapp` で先程作ったサンプルアプリを開いておきます。

エクステンションをインストールします。
![スクリーンショット 2021-05-28 7.56.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26501/1166f590-3be2-99d1-5e04-02e0f919fdb9.png)

推奨設定があるらしいのでよしなに。
![スクリーンショット 2021-05-28 7.57.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26501/1041c15e-b91b-18da-6960-c253ef0db605.png)

`lib/main.dart` が実体のようなので、こちらを開きタイトルを適当に変えてみました。
![スクリーンショット 2021-05-28 9.18.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26501/fcd70650-42d9-d0ff-4db2-4a9d55b56aa7.png)

ターミナルを閉じてなければ以下のような記述があると思われるので、 `r` キーを押してみます。

```terminal
🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".
```

画面が変わりました。編集内容が反映されています。
![スクリーンショット 2021-05-28 9.21.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26501/aa9213cd-5cbf-4a86-d2b3-50fc80412509.png)

ところで、いちいちターミナルに戻って `r` キーを押すのも面倒です。
一旦ターミナルで動いているアプリケーションを終了します（`q`キーを押します)

`VS Code` で `Run > Start Debugging` または `F5` キーを押下することで、デバッグモードでアプリケーションが起動します。
![スクリーンショット 2021-05-28 9.24.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26501/d27f330a-ea34-aecb-5e50-11e745019aa7.png)

この状態で `lib/main.dart` を編集・保存すると、自動的にリビルドされ、画面が更新されるようになりました。
![20210528092809.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26501/d66ec8d2-91e3-86a3-02f7-ceaaa561dca9.gif)

## 参考にさせてもらった記事
https://qiita.com/nskydiving/items/4fcf0dbad923d50601f9

https://qiita.com/kurun_pan/items/6349f6f38c837ee250b3

https://qiita.com/Statham/items/46812e0aab4862d44709