tapgesturerecognizer not working in flutter webview

Question

I tried using GestureRecognizer in flutter webview to zoom out on Double pinch.But it is not working. If you have any solution then please help me

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';

void main()=>runApp(WebView());

class WebView extends StatefulWidget {
  @override
  _WebViewState createState() => _WebViewState();
}

class _WebViewState extends State<WebView> {
  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(


      body: Builder(builder: (BuildContext context) {
        return WebView(
          key: UniqueKey(),
          gestureRecognizers:
          Set()..add(Factory<TapGestureRecognizer>(() => TapGestureRecognizer(),)),//ZOOM WEBVIEW

          initialUrl:
              'https://stackoverflow.com/questions/',

          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
        );
      }),

    );
  }
}

This was the important part of code If you need full code then please comment.

Answer 1

I run at the same problem and was able to make TapGestureRecognizer work by wrapping WebView into GestureDetector with onTap() inside of it. Except that I don't know why does it work.

@override
 Widget build(BuildContext context) {
return Scaffold(
  body: GestureDetector(
    onTap: () {
      print("This one doesn't print");
    },
    child: Container(
      child: Stack(
        children: <Widget>[
          WebView(
            initialUrl:
                'example.com',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _controller.complete(webViewController);
            },
            gestureRecognizers: Set()
              ..add(
                  Factory<TapGestureRecognizer>(() => TapGestureRecognizer()
                    ..onTapDown = (tap) {
                      print("This one prints");
                    })),
          ),
        ],
      ),
    ),
  ),
);
}

Wondering if anyone had similar issue and made it work properly.

Answer 2

Until there is not a proper way to do it, I have done it like below for my case

Container(
    child: Stack(
      children: <Widget>[
        WebView(
          initialUrl:
              'example.com',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
          gestureRecognizers: Set()
            ..add(
                Factory<TapGestureRecognizer>(() => TapGestureRecognizer()
                  ..onTapDown = (tap) {
                    print("This one prints");
                  })),
        ),
        GestureDetector(
              onTap: () {
                print("ontap");
              },
              child: Container(
                  color: Colors.transparent,
                  width: double.infinity,
                  height: 50,
              ),
            )
      ],
    ),
  ),