Flutter Webでbodyにアクセスする
Flutter Webでアプリを開発していると、なかなか無いはずですが、body
エレメントにアクセスしたくなる瞬間があるかもしれません。
そんなときは、下記のように取得できます。
// get flutter web's main view
final fltGlassPane = html.window.document.querySelector('flt-glass-pane');
final body = fltGlassPane?.parent;
flt-glass-pane
は、執筆地点ではhtml
でもcanvas-kit
による描画のどちらでも、FlutterのViewの親になっています。
Flutter now renders all web platform views in a consistent location of the DOM, as direct children of flt-glass-pane (regardless of the rendering backend: html or canvaskit). Platform views are then "slotted" into the correct position of the App's DOM with standard HTML features.
Up until this change, Flutter web would change the styling of the rendered contents of a platform views to position/size it to the available space. This is no longer the case. Users can now decide how they want to utilize the space allocated to their platform view by the framework.
このため、flt-glass-pane
を取得し親要素をチェックすることで、body
にアクセスできます。webのe2eテストでは、そもそもflt-glass-pane
にアクセスできないとfail
です。
どうしてもbody
にアクセスしなければならなくなった時に、活用してみてください。
Discussion