Flutter notes

Flutterに関するメモ書き

Flutter for Webを動かしてみた

Google I/O 2019にて、Flutter for Webが発表されました。

多くの人が「やってみた」記事を書いてることと思いますが、それは見ずにあえて自分でもやってみようと思います。

Flutter SDKのバージョンアップ

at least v1.5.4

v1.5.4以上が必要ということなので、まずはバージョンアップです。

$ 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のインストール

$ 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を動かしてみる

$ pwd
/path/to/flutter_web/examples/hello_world/

$ flutter packages upgrade
$ pub get
$ webdev serve

$ open http://localhost:8080/

f:id:tnantoka:20190508231109p:plain

動いてます!

spinning_squareも

$ cd ../spinning_square/
$ pub get
$ webdev serve

$ open http://localhost:8080/

こちらも動いてます!!

f:id:tnantoka:20190508231152g:plain

まだテクニカルプレビューなので、本番に使えるような状態ではない(hello worldですら重い)ですが、今後に期待できそうです。

2019-05-11 追記

以下の記事で実際に使ってみました。

flutter.tnantoka.com