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