How to add a double tap gesture to video player without loosing the focus of controls?

Question

I tried it by wrapping the

return ClipRRect(
            borderRadius: BorderRadius.circular(30.0),
            child: Chewie(
              controller: _chewieController,
            )

with

return Stack(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(30.0),
                child: Chewie(
                  controller: _chewieController,
                ),
              ),
              Positioned.fill(child: GestureDetector(
                onDoubleTap: (){
                  print('its double tapped ');
                },
                child: Container(
                  color: Colors.transparent,
                  height: double.infinity,
                  width: double.infinity,
                ),))
            ],
          );

Now I am able to doubleTap, but with a single tap, controllers don't appear, Is there any way I can achieve both things.
With a doubleTap, I can call the like function and with onTap to show the controllers.
the package used above chewie 0.12.0

Answer 1

return GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTapDown: (_) {
              setState(() {
                isMute = !isMute;
                _chewieController.setVolume(isMute ? 0 : 1);
              });
            },
            onDoubleTap: (){
              print('liked');
            },
            child: ClipRRect(
              borderRadius: BorderRadius.circular(30.0),
              child: Chewie(
                controller: _chewieController,
              ),
            ),
          );

on simple onTap on video, it shows the controller, onTap here is not getting override hence
onTapDown is used as an alternative to onTap to mute the video.

Answer 2

I don't know how Chewie is built but if there is GestureDetector you could change it to something like this:

GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () => setState(() => // show_controls,),
    onDoubleTap:() => setState(() => // like behaviour,),
    child: VideoWidget // or whatever is there
}

So you can have both listeners on one widget. I think that way onTap will be with some slight delay to check if it is not onDoubleTap. That way you don't have to put overlay on top of your widget.

If for some reason you want to have this overlay... then the interesting attribute here is behaviour as it decides if elements behind will receive events.

https://api.flutter.dev/flutter/rendering/PlatformViewHitTestBehavior-class.html

Update Try changing into

GestureDetector(
                behavior: HitTestBehavior.translucent,
                onDoubleTap: (){
                  print('its double tapped ');
                }

OR

In the github project, this line: https://github.com/flutter/plugins/blob/master/packages/video_player/video_player/example/lib/main.dart#L290

It seems that the controls only show when video is in pause state. Its about this value controller.value.isPlaying.

Why not to control it in your own GestureDetector ?

GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () => setState(() => _controller.pause() ,), //changing here 
    onDoubleTap:() => setState(() => // like behaviour,),
    child: VideoWidget // or whatever is there
}

Anyway, hope it you will find answer