Flutter for Webの環境構築手順

# 1. はじめに

Flutterでwebアプリを作れる、[Flutter webがベータ版に昇格すると発表](https://medium.com/flutter/announcing-flutter-1-12-what-a-year-22c256ba525d)がありました。これにより、従来[こちら](https://github.com/flutter/flutter_web.git)で管理されていたコード類がメインラインにマージされ、仕組みも変わっています。来年あたりに正式版リリースという感じでしょうか。

### 2021/3/4 

[Flutter Engage (2021)](https://youtu.be/zSbsIiluixw?t=1019)で正式版にアップデートされました！ Flutter 2.0以降はstableチャンネルでも利用できます！

# 2. 環境構築の手順

2021/3/4時点の最新手順です、LinuxとmacOSの両方で試しています。

**※webdevを使うやり方はα版までの古いやり方です！**

## 2.1 Flutter SDKインストール
リポジトリからcloneした後は、適当なパスに配置します。

```shell
$ git clone https://github.com/flutter/flutter
$ sudo mv flutter /usr/local/
```

パスを通します。

```shell
$ sudo nano /etc/paths
上記の例だと、/usr/local/flutter/binをファイルに追記
```

## 2.2 Flutter for webを使う設定

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

### 2.2.1 補足

flutter configコマンドで~/. flutter_settingsファイルの内容が書き換わります。

```shell
$ cat ~/.flutter_settings 
{
  "enable-linux-desktop": true,
  "enable-macos-desktop": true,
  "enable-web": true
}
```

## 2.3 実行可能なデバイスを調べる

Chromeブラウザをインストール済みであれば、以下のようにchromeとweb-serverの2つが見えるはずです。

```
$ flutter devices
Downloading package sky_engine...                                   0.2s
Downloading common tools...                                         0.6s
Downloading common tools...                                         0.6s
Downloading linux-x64 tools...                                      2.0s
2 connected devices:

Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.108
Web Server • web-server • web-javascript • Flutter Tools
```

# 3. サンプルプログラムの実行

```shell
$ cp -rf /usr/local/flutter/examples/flutter_gallery .
$ cd flutter_gallery
```

## 3.1 Chromeで表示する場合

```shell
$ flutter run -d chrome
 
Launching lib/main.dart on Chrome in debug mode...
Building application for the web...                                14.0s
Attempting to connect to browser instance..                         4.1s

Warning: Flutter's support for web development is not stable yet and hasn't
been thoroughly tested in production environments.
For more information see https://flutter.dev/web

🔥  To hot restart changes while running, press "r". To hot restart (and refresh the browser), press "R".
For a more detailed help message, press "h". To quit, press "q".
Debug service listening on ws://127.0.0.1:51377/ZKlc4siyG-g=
```

<img width="1065" alt="スクリーンショット 2019-12-17 22.52.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259963/7cf4d4b7-c7d8-036b-8a1a-bd4b07791353.png">


## 3.2 webサーバーを立ち上げる場合

```
$ flutter run -d web-server
Running "flutter pub get" in flutter_gallery...                    24.1s
 
Launching lib/main.dart on Web Server in debug mode...
Building application for the web...                                36.5s
lib/main.dart is being served at http://localhost:51281/

Warning: Flutter's support for web development is not stable yet and hasn't
been thoroughly tested in production environments.
For more information see https://flutter.dev/web

🔥  To hot restart changes while running, press "r". To hot restart (and refresh the browser), press "R".
For a more detailed help message, press "h". To quit, press "q".
```

その後、任意のブラウザで[http://localhost:51281/]()を開く

## 3.3 Chromiumブラウザを利用する場合

Chromeブラウザの代わりに、そのベースであるChromiumブラウザを利用することも可能です。その場合、以下のようにブラウザ実行の環境変数を設定します。あとはChromeブラウザの場合と同じ手順です。

```
$ export CHROME_EXECUTABLE=${chromiumブラウザのバイナリのインストールパスを指定}
```