← Page-Type Lab に戻る
FlutterFlow / Flutter Web CanvasKit / DOM ではなく canvas にピクセル描画

FlutterFlow(canvas 描画) — DOM が存在しない

FlutterFlow は Flutter Web(CanvasKit)を出力し、UI 全体を 1 枚の canvas に ピクセルとして描く。ボタンもテキストも DOM ノードではなく canvas の絵。si.js はロードでき widget host もマウントし得るが、読める・ラベル付けできる・修正できる DOM テキスト/コントロールが 存在しないため、widget は何も操作できない。

Flutter Web 描画面(疑似 CanvasKit)

低コントラスト文(widget contrast 機能の対象)。これは DOM テキストだが、実アプリ UI は下の canvas 内にあり DOM ではない。

↑ 上の「カード・見出し・ボタン」はすべて canvas のピクセル。テキストノードでもボタン要素でもない。

なぜ gap か

Flutter Web は DOM を持たず canvas に直接描画するため、a11y ツリーは限定的かつ widget の DOM ベース検出(alt 欠落・無ラベル input・コントラスト等)が成立しない。canvas pixel = DOM 無し → widget には処理対象が無い。対応するには Flutter 側の SemanticsService / アプリ内 a11y で 補う必要があり、外部 widget からは介入できない。