In the dashed areas, clicks won't work as expected.
PointerInterceptor
creates a platform view consisting of an empty HTML element. The element has the size of its child
widget, and is inserted in the layer tree behind its child in paint order.
This empty platform view doesn't do anything with mouse events, other than preventing them from reaching other platform views underneath it.
This gives an opportunity to the Flutter framework to handle the click, as expected:
Each PointerInterceptor
(green) renders between Flutter widgets and the underlying HtmlElementView
. Clicks work as expected.
Some common scenarios where this widget may come in handy:
All the cases above have in common that they attempt to render Flutter widgets on top of platform views that handle pointer events.
There's two ways that the PointerInterceptor
widget can be used to solve the problems above:
Wrapping your button element directly (FAB, Custom Play/Pause button...):
PointerInterceptor( child: RaisedButton(...), )
As a root container for a “layout” element, wrapping a bunch of other elements (like a Drawer):
Scaffold( ... drawer: PointerInterceptor( child: Drawer( child: ... ), ), ... )
debug
The PointerInterceptor
widget has a debug
property, that will render it visibly on the screen (similar to the images above).
This may be useful to see what the widget is actually covering when used as a layout element.