WebView getting Taps of Other Widgets

My problem is that I have a bunch of widgets on top of a webview, inside of a “Stack” widget. When I tap on the widget right above the webView, the Webview recives the click TOO. I have a GestureDetector on top of my widgets to claim Focus, but it doesn’t seam to stop the “tap” from passing through. The structure is this:

Scaffold 
 body: Stack
  children:[
     WebView
     GestureDetector(
         onTap: (()=>new FocusNode()))
         child: SlidingPane

Thanks a lot in Advance!

Hey @mahesh_krishnappa do you think you could help?? Thanks :slight_smile:

Thanks for explaining and giving a rough widget tree.
I can work with that.
Let me try and if I find any solution, I will let you know.

Great! Thanks a lot!!

Handling tap events inside a Stack widget without defined height and width can be really tricky.

You could avoid the onTap event being received by WebView by wrapping the WebView widget by IgnorePointer widget and setting its “ignoring” property to true.

Scaffold
  body: Stack
    children:[
      IgnorePointer(
        ignoring: true,
        child: WebView()
      ),
      GestureDetector(
        onTap: ( ) { //perform your action here
               }
        child: SlidingPane
1 Like

It is not a great solution for me, as the Widget on top is a “slidingPanel” and the user can drag i, up and down, to interact with the webView, but I can make it work if I don’t find another solution. Thanks a lot for the time @mahesh_krishnappa, really :slight_smile:

2 Likes

Actually @mahesh_krishnappa not even with that works, ahhahaha. It must be something wrong with the package because it does some very strange things. I’ll keep this Topic updated on what I find.

No worries, happy to help! :slight_smile:

The solution I posted worked fine for me. I executed it before I posted here.

Of course the difference is, child property of GestureDetector is a slidingPanel in your case and in my case it was just a Text widget.

Reading your response, it looks like the package you’re using is introducing some sort of a limitation to default behaviour.

To understand better, I have few questions.

  1. What is that you are trying to achieve? / What is the objective?

Top widget is a slidingPanel. Which is wrapped by a GestureDetector. This GestureDector has a onTap property.

  1. What is the purpose of this onTap?

Hope we can solve this!

Hey mahesh, I ended up solving the problem, I’m not sure what was happening, but apparently when I requested focus on the Sliding panel, It would pass through the event. Very strange. After a lot of refactoring for performance the error went away :wink:

Thanks for the interest and the help.

2 Likes

That’s good to know.
Cheers :slight_smile:

Hey @mahesh_krishnappa the problem came back, ahhahaha. I think it has something to do with the webs. I think some of the webs are capturing the click event and acting on it even when it is not supposed to. And while Flutter is deciding if the webview wins or not, they act on it. Something like that, but I’m still very confused.

For example if you are on Google.com, and click on the slidingUpPannel over the TextField of Google, it will react to the click, but in a search, the results wont. It has happend to me on other sites that I know do things like taking control of the click events, so thats is why I suspect that.

Any thoughts on how to solve it ?? :wink:

Many thanks my friend!