ここ をベースに試してみます。
セットアップ
$ flutter channel beta $ flutter upgrade $ flutter config --enable-web
ここまで実行したらエディタを再起動しましょう
webが有効になると flutter devices コマンドの結果にChromeが出力されます（betaにしないと出てきません）
$ flutter devices 3 connected devices: iPhone 11 Pro Max • 82AC52A8-9EC0-4495-B979-XXXXXXXXXXXX • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator) Chrome • chrome • web-javascript • Google Chrome 79.0.3945.88 Web Server • web-server • web-javascript • Flutter Tools
また、IDEを再起動するとデバイスの一覧にChromeが表示されるようになります。
作成したアプリを実行する
すでに作成したアプリがある場合、以下のコマンドでwebとしてアプリを実行します。
flutter run -d chrome
おや、このままだと実行ができません。
webの設定がプロジェクトに反映されていないためなので以下のコマンドを実行し、既存のプロジェクトがwebとしても動作するようにします。
flutter create .
webディレクトリが作成されていればOKです。
再度以下のコマンドを実行しChromeで確認しましょう。
flutter run -d chrome
dartコードで開発をしつつ、ターミナルで r ボタンを押してChromeの画面を更新しつつ進めていくイメージだと思います。
WebのBuild
Webのbuildは以下のコマンドで実行します。
flutter build web
root/build/web 配下にhtmlやmain.dart.jsファイルなどが配置されます。
まとめ
Flutterで実装したアプリケーションがある場合、驚くほどかんたんにwebの画面を生成することができます。
デザイン的にもマテリアルデザインのものがきれいに出力されるので、手っ取り早くapp/webを両方作成したい人には良さそうです。
まだそれほど使い込んではいませんが、気づいたことなどはblogに残していこうと思います。
ではでは。
