前提
Flutter コマンドを叩ける状態にしておく
スポンサーリンク
コマンド
Flutterパッケージのあるディレクトリで次のコマンドを叩く
$ flutter channel master
flutter をアップグレードします。
$ flutter upgrade
Web サポートを有効にします。
$ flutter config --enable-web
chrome などのブラウザが使えるかを念の為確認します。
$ flutter devices
モバイルプロジェクトと同様にプロジェクトファイルを作成します。
$ flutter create the_basics
Chrome で開く場合
Chrome でローカルで開発する場合に使う感じです。
$ flutter run -d chrome
## 成功時
Downloading Web SDK... 8.9s
Launching lib/main.dart on Chrome in debug mode...
Syncing files to device Chrome...
17,359ms (!)
Debug service listening on ws://127.0.0.1:62972/QwJpY-485sk=
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" or "R".
For a more detailed help message, press "h". To quit, press "q".
Chrome が開いて開発できます。
任意のサーバーで立ち上げる場合
laravel artisan serve みたいな感じ localhost で立ち上げたい場合に使う。
$ flutter run -d web-server
## 成功時
Launching lib/main.dart on Web Server in debug mode...
Syncing files to device Web Server...
11,031ms (!)
lib/main.dart is being served at http://localhost:63225
最後に書いている http://localhost:63225 を開くと表示されます。