Flutter for Web

Flutter for Web でWebプロジェクトを新規作成する

前提

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 を開くと表示されます。

ABOUT ME
tamappe
都内で働くiOSアプリエンジニアのTamappeです。 当ブログではモバイルアプリの開発手法について紹介しています。メインはiOS、サブでFlutter, Android も対応できます。 執筆・講演のご相談は tamapppe@gmail.com までお問い合わせください。