Flutter WebからDOM、ブラウザAPI、JavaScript関数を直接使って、Chromeが持つ機能をフル活用する by 高田 晴彦

FlutterはiOS/Androidアプリだけでなく、Webのフロントエンドも出力することができます。初回読み込みの遅さなど欠点はありますが、それによって例えば、Web開発の技術にあまり詳しくないFlutterエンジニアが、PCのChromeで動くツールを短期間で開発することが可能です。

FlutterによるWeb開発はモバイルアプリと同様にWidgetやプラグインを使って構築しますが、それだけでは要件を満たせない場合はDOM、ブラウザAPI、JavaScript関数を直接呼び出すことで、Chromeが持つ機能をフル活用することが可能です。

本セッションでは以下のことを話します。

• dart:htmlライブラリを使用してDOMとブラウザAPIを使う
• 単体テスト実行時にdart:htmlライブラリを含んでしまうと、Chromeに依存してしまい取り回しが悪くなるので、Conditionally importingを使ってテストと本番でインポートするDartファイルを切り替える
• TensorFlow.jsのような、Flutter向けプラグインが提供されていないJavaScriptライブラリを呼び出すために、jsパッケージを使う