Flutter for Webの環境構築手順

1. はじめに

Flutterでwebアプリを作れる、Flutter webがベータ版に昇格すると発表がありました。これにより、従来こちらで管理されていたコード類がメインラインにマージされ、仕組みも変わっています。来年あたりに正式版リリースという感じでしょうか。

2021/3/4

Flutter Engage (2021)で正式版にアップデートされました！ Flutter 2.0以降はstableチャンネルでも利用できます！

2. 環境構築の手順

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

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

2.1 Flutter SDKインストール

リポジトリからcloneした後は、適当なパスに配置します。

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

パスを通します。

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

2.2 Flutter for webを使う設定

$ flutter config --enable-web

2.2.1 補足

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

$ 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. サンプルプログラムの実行

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

3.1 Chromeで表示する場合

$ 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=

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ブラウザのバイナリのインストールパスを指定}