[Flutter] Flutter Web の開発環境を構築する

Flutter Web の環境を構築したい

• Building a web application with Flutter – Flutter

Flutter で Web 開発ができるようにするためのセットアップ手順をまとめます。Flutter のインストールは済んでいる前提です。

環境構築

まず、Flutter を beta チャンネルにして SDK を更新します。更新後 Web サポートを有効にします。

$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web

これで Flutter Web を利用するためのセットアップは完了です。利用可能なデバイスを確認するコマンドでブラウザが確認できるはずです。

$ flutter devices
2 connected devices:

Chrome (web) • chrome • web-javascript • Google Chrome 87.0.4280.88
Edge (web)   • edge   • web-javascript • Microsoft Edge 87.0.664.66

動作確認

あとは普通に Flutter プロジェクトを作成して実行すればブラウザで動作を確認できます。

$ flutter create myapp
$ cd myapp
$ flutter run -d chrome

デバイスに chrome を指定しています。ブラウザ上で Flutter アプリが動作します。

既存プロジェクトに Flutter Web サポートを追加したい

上記手順で flutter

既存プロジェクトで flutter create . を実行するだけです。

$ flutter create .

以上で Flutter Web が利用できるようになります。実行時に同じようにデバイスを指定してやればよいです。

$ flutter run -d chrome

いい感じです。