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),
      ),
    );
  }

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),
      ),
    );
  }

• flutter
• dart
• flutter-inappwebview

2 Answers 2

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:

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

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

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

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.