Google I/O 2019にて、Flutter for Webが発表されました。
https://medium.com/flutter-io/bringing-flutter-to-the-web-904de05f0df0
多くの人が「やってみた」記事を書いてることと思いますが、それは見ずにあえて自分でもやってみようと思います。
Flutter SDKのバージョンアップ
https://github.com/flutter/flutter_web
at least v1.5.4
v1.5.4以上が必要ということなので、まずはバージョンアップです。
1
2
3
4
5
6
7
$ flutter --version
Flutter 1.2.1 • channel stable • https://github.com/flutter/flutter.git
$ flutter upgrade
$ flutter --version
Flutter 1.5.4-hotfix.2 • channel stable • https://github.com/flutter/flutter.git
できました。
webdevのインストール
1
2
3
4
5
6
7
8
9
10
11
$ git clone git@github.com:flutter/flutter_web.git
$ cd flutter_web/examples/hello_world/
$ flutter pub global activate webdev
$ echo 'export PATH="$PATH:$HOME/bin/flutter/.pub-cache/bin"' >> ~/.bash_profile
$ echo 'export PATH="$PATH:$HOME/bin/flutter/bin/cache/dart-sdk/bin"' >> ~/.bash_profile
$ . ~/.bash_profile
$ webdev --version
2.0.4
dartコマンドにパスが通っていないとエラーになるようでした。
/path/to/bin/flutter/.pub-cache/bin/webdev: line 7: dart: command not found
hello_worldを動かしてみる
1
2
3
4
5
6
7
8
$ pwd
/path/to/flutter_web/examples/hello_world/
$ flutter packages upgrade
$ pub get
$ webdev serve
$ open http://localhost:8080/
動いてます！
spinning_squareも
1
2
3
4
5
$ cd ../spinning_square/
$ pub get
$ webdev serve
$ open http://localhost:8080/
こちらも動いてます！！
まだテクニカルプレビューなので、本番に使えるような状態ではない（hello worldですら重い）ですが、今後に期待できそうです。
2019-05-11 追記
以下の記事で実際に使ってみました。
