Designing for the Web with Flutter (Flutter Interact ‘19)の視聴メモです。
Flutter Webの利点とは
- インストール無しでアプリを試せること
- 反復を通じての改善（イテレーションサイクル）が迅速になること
レスポンシブデザイン
Web対応では特に重要となるレスポンシブデザイン。
Web Standard対応
Google社内でよくある質問
コードサイズは？パフォーマンスは？
マテリアルデザインアプリでは、最低でも300KB（gzipped)。このサイズを抑えるためにハードワーク中。パフォーマンスに関しても、DOMの無駄な破棄と再生成を抑制するようにしている。
アクセシビリティ機能が動かないのでは？
リペイントをFlutterが制御しているということは、Webのアクセシビリティ機能が壊れるのではという疑問に対して。FlutterのWidget TreeとSemantic Treeは異なる。実行時の実際のTreeよりも小さなSemantic Treeを維持することで、Webのアクセシビリティ機能であるARIAに対応している。
既存のモバイル用のプラグインにWebサポートを追加するべきなのか？
Web Pluginを使ってWeb APIを利用する。
Pluginは、プラットフォームの機能の実装を隠蔽し、PluginのAPIを通じてその機能を利用する手段を提供する。
(注) 将来は、web用のdependencyをpubspec.yamlに書く必要はなくなるようです。
例として、SharedPreferencesのWeb Pluginの実装を見たら、現状でのWeb Pluginを書き方を理解しやすい。
現状のユースケース
コンパニオンアプリを作る
メインのモバイルアプリとは独立して、そのアプリの補助用として、デスクトップWebでキーボードも利用できるアプリを作る。
WebページにFlutterを埋め込んで利用する。
感想
FlutterのWebサポートが成熟したら、まずはUIをレスポンシブなWebブラウザー上で作って、ネイティブアプリであとで確認という手法が有効そう。プラットフォームとの通信が必要なるモジュールでWebで実現できない箇所は、Webではスタブ化しておけば良い。
