Widgets are not interactable when stacked on top of a WebViewWidget in web.

[willov]

It appears that stacking widget on top of a WebViewWidget does not work in the web version.
I have also tested this on Android, and there stacking widgets on top of WebViewWidget does appear to work.
I also tried using another WebView package web_browser, but the same behaviour occurs.

Steps to Reproduce

1. Install webview_flutter_web (0.2.2+1) webview_flutter
2. Execute flutter run on the code sample using Chrome (see "Code sample" section below)
3. Click "Webview with icon test" button
4. Interact with widgets (back button, visibility icon)

Expected results:

Interactivity with the widgets, such as returning when using the back button, or switching the visibility symbol to a visibility_off symbol.

Actual results:
No interactivity. The back button sometimes show the "hover over" effect.

Code sample

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
// import 'package:web_browser/web_browser.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) => Scaffold(
          body: Center(
            child: Card(
              child: ListTile(
                  title: const Text(
                    'Webview with icon test',
                  ),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (BuildContext context) {
                          return const WebViewPage();
                        },
                      ),
                    );
                  }),
            ),
          ),
        ),
      ),
    );
  }
}

class WebViewPage extends StatefulWidget {
  const WebViewPage({Key? key}) : super(key: key);

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..loadRequest(
        Uri.parse('http://flutter.dev'),
      );
  }

  bool visibilityIsPressed = false;
  @override
  Widget build(BuildContext context) {
    final ColorScheme colors = Theme.of(context).colorScheme;

    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        iconTheme: IconThemeData(
          color: colors.primary, 
        ),
        backgroundColor: Colors.transparent,
      ),
      body: Stack(
        children: [
          WebViewWidget(controller: _controller),
          // Browser(initialUriString: 'https://flutter.dev/',), //Another package with the same issue
          SafeArea(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  IconButton(
                    iconSize: 30,
                    icon: (visibilityIsPressed)
                        ? const Icon(Icons.visibility_off_outlined)
                        : const Icon(Icons.visibility_outlined),
                    onPressed: () {
                      setState(() {
                        visibilityIsPressed = !visibilityIsPressed;
                      });
                    },
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Logs

The verbose log is too long to attach in the text so it is attached as a separate file.
run_verbose.txt

Analyzing flutter_application_1...                                      
No issues found! (ran in 1.0s)

[✓] Flutter (Channel stable, 3.7.6, on Ubuntu 22.10 5.14.0-1034-oem, locale en_US.UTF-8)
    • Flutter version 3.7.6 on channel stable at /home/william/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 12cb4eb7a0 (3 weeks ago), 2023-03-01 10:29:26 -0800
    • Engine revision ada363ee93
    • Dart version 2.19.3
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /home/william/Android/Sdk
    • Platform android-33-ext4, build-tools 33.0.2
    • Java binary at: /snap/android-studio/125/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /snap/bin/chromium

[✓] Linux toolchain - develop for Linux desktop
    • clang version 10.0.0-4ubuntu1
    • cmake version 3.16.3
    • ninja version 1.10.0
    • pkg-config version 0.29.1
[run_verbose.txt](https://github.com/flutter/flutter/files/11054321/run_verbose.txt)


[✓] Android Studio (version 2021.3)
    • Android Studio at /snap/android-studio/125/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] VS Code
    • VS Code at /snap/code/current
    • Flutter extension version 3.60.0

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 22.10 5.14.0-1034-oem
    • Chrome (web)    • chrome • web-javascript • Chromium 111.0.5563.64 snap

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[darshankawar]

@willov
Thanks for the report. You mentioned webview_flutter_web and in code sample you used webview_flutter, so could you clarify this ?
We know that webview_flutter_web is web implementation of the plugin, but would be helpful to know if this is related to webview_flutter itself or with _web version of the plugin.

[willov]

I was under the impression that webview_flutter_web was needed to run webviews in a web application.
But you are correct that it was not included in the code sample. Furthermore, removing webview_flutter_web from the pubspec.yml and runningflutter pub clean still allows the application to run. So, I assume that that webview_flutter_web was indeed not used. Sorry for the mixup!

Still, it is not possible to interact with the stacked widgets in the web application (when using the webview_flutter package).

I have uploaded the full small example to this repository: https://github.com/willov/flutter_webview_issue_example

[darshankawar]

Thanks for the update. I verified this behavior on web and on mobile and confirmed that the reported behavior occurs on web, ie, tapping on stacked widgets like back button or eye icon don't perform any action, as they are placed over the webview.
Whereas, the same interactions occur on mobile platform (Android). I don't see an existing issue for web platform for same behavior, so labeling as such.

stable, master flutter doctor -v

[!] Flutter (Channel stable, 3.7.7, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.7.7 on channel stable at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2ad6cd72c0 (12 days ago), 2023-03-08 09:41:59 -0800
    • Engine revision 1837b5be5f
    • Dart version 2.19.4
    • DevTools version 2.20.1
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.9.0-16.0.pre.42, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 3.9.0-16.0.pre.42 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a8afbfa22e (47 minutes ago), 2023-03-24 00:00:20 -0400
    • Engine revision 1da070c57c
    • Dart version 3.0.0 (build 3.0.0-362.0.dev)
    • DevTools version 2.22.2
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/dhs/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 65.1.4
    • Dart plugin version 213.7228

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.29.0

[✓] Connected device (3 available)
    • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
      • iOS 15.3.1 19D52
    • macOS (desktop)           • macos                                    •
      darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)              • chrome                                   •
      web-javascript • Google Chrome 109.0.5414.119

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
      
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[stuartmorgan]

@ditman Is this a duplicate?

[ditman]

... stacking widgets on top of a WebViewWidget does not work in the web version...

@willov, @stuartmorgan, @darshankawar: I think this is solved by wrapping the widgets that are stacked on top of the HtmlElementView in a PointerInterceptor widget from package:pointer_interceptor (which will noop in mobile). Take a look at the package here:

• https://pub.dev/packages/pointer_interceptor

(In the future we want to promote the package to the framework, and automate its usage in several places, but for now it's a separate thing).

@willov let me know if this solves your issue!

[ditman]

@ditman Is this a duplicate?

@stuartmorgan this is a known quirk of the web framework when overlaying Flutter content on top of HtmlElementView widgets. I'll remove the "package" labels, because this will happen with any package that uses an HtmlElementView to render, like: video player, google maps, (possibly) link widget, webview_web, etc...

(I'm not sure if we keep an issue open for this since we released package:pointer_interceptor.)

[willov]

@ditman wrapping the widgets in the pointer_interceptor package does indeed solve the issue in the web application. Perhaps obviously, I had to include a leading icon with an onPressed action to get the back button to be intractable.

Perhaps mentioning this pointer_interceptor package on the webview_flutter page would be a good idea?

Either way, big thanks for pointing out the solution!

[yjbanov]

For now making it a documentation issue, but we should consider moving pointer interceptor into the framework, so that:

• All built-in overlays - dialogs, menus, app bars, drawers - use it automatically.
• It's available without needing an extra package.