flutterのバージョンを(1.5.4以上に)あげる
Flutter 1.5 and above enable support for targeting the web with Flutter, including Dart compilation to JavaScript. To use the Flutter SDK with the flutter_web preview make sure you have upgraded Flutter to at least v1.5.4 by running flutter upgrade from your machine.
とあるので下記コマンドでバージョンを上げる
flutter upgrade
flutter_webをcloneしてくる
Clone this repository locally.
とのことなので下記でcloneしてくる
git clone git@github.com:flutter/flutter_web.git
hello_worldディレクトリへ移動(hello_worldのexampleを実行してみる場合)
cd examples/hello_world/
別のexampleでも同じようにディレクトリ内に移動しておく
webdevをインストール
To install the webdev package, which provides the build tools for Flutter for web
とのことなので下記でwebdevをインストール
bash_profileの部分は適宜変更した形で下記の一連のコマンドを実行
flutter packages pub global activate webdev
echo 'export PATH="$PATH":"$HOME/.pub-cache/bin"' >> ~/.bash_profile
exec $SHELL -l
# or
source ~/.bash_profile
上記方法でインストールしてwebdevが実行できない場合はwebdev実行時に[command]の部分を適宜変更して下記の形で実行
flutter packages pub global run webdev [command]
(当初公式に代替コマンドが乗っていなかったため)自分が試した方法
自分の環境だと公式の方法で動かすことができなかったため下記コマンドでインストールした。(前提としてdartが必要。pubが使えれば何でも良い)
pub global activate webdev
パッケージを更新
flutter packages upgrade
ローカル実行
webdev serve
表示されたportにアクセスすればhello worldが表示される。
flutter_webをはじめて触った際に書いたものはこちら。
ただ触ったって話だけですw
後でfirebase hostingとかにあげるところまでやってみようかと思います。
flutter webのアプリをfirebase hostingで公開してみました
参考
flutter_web
Flutter Webを動かしたときにつまづいたこと
関連
flutter webのアプリをfirebase hostingで公開するを書きました。
Flutter Web で Firestore を使うも書きました。
追記
公式ドキュメントに下記の部分が追記されました。
Note: if you have problems configuring webdev to run directly, try:
flutter packages pub global run webdev [command].