[Webview_flutter] on iOS webview triggers the click events which was for the contents (widgets) of the Drawer or Bottom sheet

[vaimikpatel2908]

It works fine on the android but having some problems with iOS.

Steps to Reproduce

1. Create a WebView with any URL and drawer/bottom sheet/modal bottom sheet with some buttons/switch or some other content.
2. Then try to interact with the content(like buttons or sometimes even background) of drawer/bottom sheet/modal bottom sheet(I had the map on the webpage with click event trigger so it was very easy to notice the unnecessary events.

Expected results: It should not be clicking on the page as we are dealing with the content of other parts of the app.

Actual results: But it triggers the click events on the webpage of WebView while interacting with drawer or bottom sheets.

flutter analyze
Analyzing ios...
No issues found! (ran in 1.3s)

flutter doctor -v
[✓] Flutter (Channel stable, 1.22.2, on Mac OS X 10.15.7 19H2, locale en-CA)
    • Flutter version 1.22.2 at /Users/tejasghutukade/flutter
    • Framework revision 84f3d28555 (13 days ago), 2020-10-15 16:26:19 -0700
    • Engine revision b8752bbfff
    • Dart version 2.10.2
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    • Android SDK at /Users/tejasghutukade/Library/Android/sdk
    • Platform android-30, build-tools 29.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.9.3
[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
[✓] Connected device (1 available)
    • Fca’s iPhone (mobile) • 841320513647e6b44ae72fbd33282f4362f88dd9 • ios • iOS 14.0.1
• No issues found!

[darshankawar]

@vaimikpatel2908
Please provide a complete minimal reproducible code sample that shows the issue you are facing.
Thanks.

[vaimikpatel2908]

Here is my code

main.dart

import 'dart:convert';

import 'package:flushbar/flushbar.dart';
import 'package:flutter/material.dart';
import 'package:webViewBugDemo/drawer.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  WebViewController _webViewController;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      drawer: DrawerScreen(),
      body: WebView(
        initialUrl:
		///****************** Note **************************************************************
		// Please make sure your webpage has clickable links below the bottom sheet or drawer.
		// best wat to achieve this problem is enable click events on the body of the html page
		///**************************************************************************************
		
            "URL",
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller) {
          _webViewController = controller;
          _webViewController.clearCache();
        },
        onPageStarted: (url) {
          // _controller.clearCache();
          print("Url:" + url);
        },
        onPageFinished: (url) {
          _webViewController.evaluateJavascript("setIsMobile(true)");
        },
        onWebResourceError: (error) {
          print(
              "${error.errorType} - ${error.errorCode} - ${error.description} - ${error.domain}");
        },
        javascriptChannels: Set.from([
          //Service,
          JavascriptChannel(
              name: "Service",
              onMessageReceived: (JavascriptMessage message) {
                print(message.message);
                try {
                  if (message != null &&
                      message.message != null &&
                      message.message != "") {
                    Map<String, dynamic> streetMap =
                        json.decode(message.message);
                    Flushbar(
                      //{"streetName":"Square One, Mississauga","serviceLevel":"4 - MINOR COLLECTOR - CL"}
                      title: "This Road is a",
                      message: (streetMap["serviceLevel"] ?? "Not Found"),
                      duration: Duration(seconds: 3),
                      flushbarPosition: FlushbarPosition.TOP,
                    )..show(context);
                  }
                } catch (e) {
                  print(e);
                }
              }),
        ]),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

drawer.dart

import 'package:flutter/material.dart';

class DrawerScreen extends StatefulWidget {
  @override
  _DrawerScreenState createState() => _DrawerScreenState();
}

class _DrawerScreenState extends State<DrawerScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Drawer(
        semanticLabel: "Side Drawer",
        elevation: 5.0,
        child: Container(
//          color: UiHelper.backGroundColor.withOpacity(0.5),
//           child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Expanded(
                child: ListView(
                  children: [
                    DrawerHeader(
                      padding: EdgeInsets.zero,
                      child: Container(
                        color: Colors.blue,
                        child: Center(
                          child: Text("Webview demo"),
                        ),
                      ),
                    ),
                    Container(
                      width: double.infinity,
                      child: MaterialButton(
                        disabledColor: Colors.white,
                        highlightColor: Colors.blue,
                        child: Container(
                          width: double.infinity,
                          child: Row(
                            children: <Widget>[
                              Icon(
                                Icons.text_fields,
                                color: Theme.of(context).primaryColor,
                              ),
                              Flexible(
                                flex: 1,
                                child: Text(
                                  "Click Here 1",
                                  textAlign: TextAlign.left,
                                ),
                              ),
                            ],
                          ),
                        ),
                        onPressed: () {},
                        materialTapTargetSize: MaterialTapTargetSize.padded,
                      ),
                    ),
                    Container(
                      width: double.infinity,
                      child: MaterialButton(
                        disabledColor: Colors.white,
                        highlightColor: Colors.blue,
                        child: Container(
                          width: double.infinity,
                          child: Row(
                            children: <Widget>[
                              Icon(
                                Icons.text_fields,
                                color: Theme.of(context).primaryColor,
                              ),
                              Flexible(
                                flex: 1,
                                child: Text(
                                  "Click Here 2",
                                  textAlign: TextAlign.left,
                                ),
                              ),
                            ],
                          ),
                        ),
                        onPressed: () {},
                        materialTapTargetSize: MaterialTapTargetSize.padded,
                      ),
                    ),
                    Container(
                      width: double.infinity,
                      child: MaterialButton(
                        disabledColor: Colors.white,
                        highlightColor: Colors.blue,
                        child: Container(
                          width: double.infinity,
                          child: Row(
                            children: <Widget>[
                              Icon(
                                Icons.text_fields,
                                color: Theme.of(context).primaryColor,
                              ),
                              Flexible(
                                flex: 1,
                                child: Text(
                                  "Click Here 3",
                                  textAlign: TextAlign.left,
                                ),
                              ),
                            ],
                          ),
                        ),
                        onPressed: () {},
                        materialTapTargetSize: MaterialTapTargetSize.padded,
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
        // ),
      ),
    );
  }
}

[darshankawar]

@vaimikpatel2908
I see that you have used flush_bar which is a 3rd party plugin. Can you remove the relevant plugin code, use Flutter's core equivalent widget and try again to see if you get same error ? If so, please provide the update code sample.

[vaimikpatel2908]

Yes, still exists.

just a change in a main .dart

import 'package:flutter/material.dart';
import 'package:webViewBugDemo/drawer.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  WebViewController _webViewController;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      drawer: DrawerScreen(),
      body: WebView(
        initialUrl:

            ///****************** Note **************************************************************
            // Please make sure your webpage has clickable links below the bottom sheet or drawer.
            // best wat to achieve this problem is enable click events on the body of the html page
            ///**************************************************************************************

            "URL",
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller) {
          _webViewController = controller;
          _webViewController.clearCache();
        },
        onPageStarted: (url) {
          // _controller.clearCache();
          print("Url:" + url);
        },
        onPageFinished: (url) {},
        onWebResourceError: (error) {
          print(
              "${error.errorType} - ${error.errorCode} - ${error.description} - ${error.domain}");
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

drawer.dart

import 'package:flutter/material.dart';

class DrawerScreen extends StatefulWidget {
  @override
  _DrawerScreenState createState() => _DrawerScreenState();
}

class _DrawerScreenState extends State<DrawerScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Drawer(
        semanticLabel: "Side Drawer",
        elevation: 5.0,
        child: Container(
//          color: UiHelper.backGroundColor.withOpacity(0.5),
//           child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Expanded(
                child: ListView(
                  children: [
                    DrawerHeader(
                      padding: EdgeInsets.zero,
                      child: Container(
                        color: Colors.blue,
                        child: Center(
                          child: Text("Webview demo"),
                        ),
                      ),
                    ),
                    Container(
                      width: double.infinity,
                      child: MaterialButton(
                        disabledColor: Colors.white,
                        highlightColor: Colors.blue,
                        child: Container(
                          width: double.infinity,
                          child: Row(
                            children: <Widget>[
                              Icon(
                                Icons.text_fields,
                                color: Theme.of(context).primaryColor,
                              ),
                              Flexible(
                                flex: 1,
                                child: Text(
                                  "Click Here 1",
                                  textAlign: TextAlign.left,
                                ),
                              ),
                            ],
                          ),
                        ),
                        onPressed: () {},
                        materialTapTargetSize: MaterialTapTargetSize.padded,
                      ),
                    ),
                    Container(
                      width: double.infinity,
                      child: MaterialButton(
                        disabledColor: Colors.white,
                        highlightColor: Colors.blue,
                        child: Container(
                          width: double.infinity,
                          child: Row(
                            children: <Widget>[
                              Icon(
                                Icons.text_fields,
                                color: Theme.of(context).primaryColor,
                              ),
                              Flexible(
                                flex: 1,
                                child: Text(
                                  "Click Here 2",
                                  textAlign: TextAlign.left,
                                ),
                              ),
                            ],
                          ),
                        ),
                        onPressed: () {},
                        materialTapTargetSize: MaterialTapTargetSize.padded,
                      ),
                    ),
                    Container(
                      width: double.infinity,
                      child: MaterialButton(
                        disabledColor: Colors.white,
                        highlightColor: Colors.blue,
                        child: Container(
                          width: double.infinity,
                          child: Row(
                            children: <Widget>[
                              Icon(
                                Icons.text_fields,
                                color: Theme.of(context).primaryColor,
                              ),
                              Flexible(
                                flex: 1,
                                child: Text(
                                  "Click Here 3",
                                  textAlign: TextAlign.left,
                                ),
                              ),
                            ],
                          ),
                        ),
                        onPressed: () {},
                        materialTapTargetSize: MaterialTapTargetSize.padded,
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
        // ),
      ),
    );
  }
}

[darshankawar]

Issue replicable on latest stable (1.22.3). Tapping on drawer also triggers the webview url tap events on iOS that results in webview url being clicked too. Whereas, the same doesn't happen on Android.

RPReplay-Final1604299410.MP4.zip

69208_android.mp4.zip

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.3, on Mac OS X 10.15.4 19E2269, locale en-IN)
    • Flutter version 1.22.3 at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 8874f21e79 (3 days ago), 2020-10-29 14:14:35 -0700
    • Engine revision a1440ca392
    • Dart version 2.10.3

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.9.3

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (2 available)
    • SM A260G (mobile)                   • 5200763ebcfa861f
      • android-arm • Android 8.1.0 (API 27)
    • iPhone SE (2nd generation) (mobile) • 6C85835D-FBFD-4AB3-8DE8-B4FAD35E5367
      • ios         • com.apple.CoreSimulator.SimRuntime.iOS-14-0 (simulator)

• No issues found!