ntaoo blog

主にDart, Flutter, AngularDartについて書いていきます。ときどき長文。日本語のみ。Twitter: @ntaoo

Flutter Webが公開された / Flutter Native アプリをFlutter Webアプリに移植してみた

Flutter Frameworkの上でDartでUIを書いていくので、HTML, CSS, JavaScriptの各APIはそのframeworkに隠蔽されてそれらを直接書く必要がない。

現状の制約

段階としては、まだテクニカルプレビューなので、制約や未実装のAPIがある。

Limitations We intend to completely support all of Flutter's API and functionality across modern browsers. However, during this preview, there are a number of exceptions:

flutter_web does not have a plugin system yet. Temporarily, we provide access to dart:html, dart:js, dart:svg, dart:indexed_db and other web libraries that give you access to the vast majority of browser APIs. However, expect that these libraries will be replaced by a different plugin API. Not all Flutter APIs are implemented on Flutter for web yet. Performance work is only just beginning. The code generated by Flutter for web may run slowly, or demonstrate significant UI "jank". At this time, desktop UI interactions are not fully complete, so a UI built with flutter_web may feel like a mobile app, even when running on a desktop browser. The development workflow is only designed to work with Chrome at the moment.

https://github.com/flutter/flutter_web#

Flutter Web アプリをFlutter Native アプリから移植してみた

Flutter Create コンテスト用にHIITタイマーを１日ででっち上げてたので、それをFlutter Webに移植してみた。

  • Flutter Web用のpackageはFlutterのpackageとは（まだ）別なので、UIにそれぞれのプラットフォームごとにimportで静的な依存関係がある。だからUIコードは今のところコピペが必要になる。UIコードをそのままコピペして動いた。将来はpackage:universal_uiと切り出せるようになるだろう。

  • 一部のAPIは未実装。たとえばGradient APIについては実行時にUnimplemented Errorが出た。

  • Flutter Webでmaterial iconの設定方法をまだ調べていない。なにか方法があるはず。

  • UIにSoundPlayer関係の見苦しいビジネスロジックが散らばっているけど、これはFlutter Createコンテストに提出時に時間がなかったのでこうなっているだけで、本来はSoundPlayerをmodelにDIしてmodel内に閉じ込めるべきロジックです。あとで修正しておきたい。

  • サウンドはWebAudioで実装してHIIT Timer ModelDIしたらちゃんと鳴るはず。

  • Routingはどうやっているのか興味深い。SPAみたいだがいまのところ、History APIを操作しているわけではない？（そりゃそうかも）

  • Hot Reloadがちゃんと動いているようだ。(webdev serve auto=restart) WebでHMR体験。すごい。

もうすこし調べて内部の実装も読んでみる。