WebView Widget Captures Click Events, Blocking Interactions with Overlapping Widgets on Web

daynis-olman commented 1 week ago

Can we access your project?

[X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

When placing interactive widgets (e.g., buttons) on top of a WebView widget in FlutterFlow, the WebView captures all click/tap events, preventing interaction with the widgets on top. This behavior occurs even when using stacking techniques or attempting to position the overlay button outside the WebView area.

Expected Behavior

Interactive widgets (such as buttons) should be able to receive touch/click events when placed on top of a WebView widget in a Stack or similar layout. The WebView should allow events to “pass through” when it’s intended to act as a background display element, especially on web platforms where HTML elements can interfere with Flutter’s widget stacking.

Steps to Reproduce

1.  Create a new FlutterFlow page and add a WebView widget to display an HTML element or video stream.
2.  Place the WebView widget inside a Stack and set it to occupy a large area.
3.  Add an interactive widget (e.g., a button) on top of the WebView in the Stack.
4.  Attempt to click/tap the button. The WebView will intercept the click event, preventing interaction with the button.

Reproducible from Blank

[X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

Not applicable

Visual documentation

Not required

Environment

•   FlutterFlow version: Latest
    •   Platform: Web
    •   Browser name and version: Chrome 107.0.5304.110
    •   Operating system and version: macOS Monterey 12.1

Additional Information

This issue is critical when designing UIs that require interactive overlays on top of WebViews, such as recording or streaming interfaces. Without a workaround or widget to prevent click events from being captured by the WebView, creating interactive web applications with layered content becomes difficult in FlutterFlow.

daynis-olman commented 1 week ago

Alezanello commented 1 week ago

Hello!!

Thank you for bringing this to our attention!

I was able to replicate this behavior and will forward it to the engineering team so they can work on a fix.

Thank you for your patience!

FlutterFlow / flutterflow-issues