Edited at

flutter webでexampleを動かすまで(flutterインストール済みを想定)


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].