Flutter InAppWebView blocks FloatingActionButton click

Question

I am a newbie doing Flutter and I want render 3d stuff on display using threejs because flutter scene is not supported for web yet. I thought of using an InAppWebView doing the threeJS stuff and in front I use the Flutter widgets to make the UI.

The problem is, that everything I place in front of the InAppWebView does not get any mouse events. I suppose it is because the InAppWebView uses an iframe and the events are not forwarded to the widgets in front.

The problem is only when using web target not macos target. Does anyone had same issues or know how I can solve this problem?

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: SelectableText('Three.js Cube  $_counter')),
      drawer: myDrawer(context: context),
      body:  InAppWebView(
        initialFile: "assets/index.html",
        initialSettings: InAppWebViewSettings(
          javaScriptEnabled: true
        ),

        onWebViewCreated: (InAppWebViewController controller) {
          _controller = controller;
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

Ben the Border · Accepted Answer · 2025-02-16 05:24:58Z

1

It is an old issue of Flutter Web using WebView & I am not sure if Flutter team has a plan to fix it in the future. You just simple do like this:

Add this package to your dependencies : https://pub.dev/packages/pointer_interceptor
Wrap your FloatingActionButton into PointerInterceptor like this:

floatingActionButton: PointerInterceptor(
  intercepting: kIsWeb,
  child: FloatingActionButton(),
)

Read more about the issue: https://github.com/flutter/flutter/issues/100679

answered Feb 16 at 5:24

Ben the Border

1,1176 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anas Albattiri · Accepted Answer · 2025-02-16 13:36:38Z

1

You're right—the issue occurs because the InAppWebView uses an iframe, which captures all pointer events, preventing Flutter widgets in front of it from receiving interactions.

Possible Solution:

Use pointer-events: none on the WebView You can try modifying your index.html file to include this CSS:

body {
  pointer-events: none;
}
canvas {
  pointer-events: auto;
}

This allows events to pass through the iframe while keeping interactions active for Three.js elements.

answered Feb 16 at 13:36

Anas Albattiri

611 bronze badge

Collectives™ on Stack Overflow

Flutter InAppWebView blocks FloatingActionButton click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related