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

sonic · Answer 1 · 2020-12-08T17:46:24.830

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

edited Dec 08 '20 at 17:46

answered Dec 08 '20 at 16:25

sonic

1,282
1
9
22

Hey, thanks for responding, But the thing is main concern is video-player, not gesture detector. I need to know if there's any show control function for the video player. – kanwar manraj Dec 08 '20 at 16:44
for Chewie specifically or for video_player 1.0.1 – kanwar manraj Dec 08 '20 at 17:21
ok, you should provide some decription of package you want to use if its not in official docs, otherwise its hard to know what are you using – sonic Dec 08 '20 at 17:24
oh my bad :D its is developed by flutter team – sonic Dec 08 '20 at 17:30
I am using Chewie and what I can see is, by your method the onTap is not detected, but still, on onTap, it shows the controller and its detecting the double-tap behaviour, So in short, I am able to achieve what I wanted, So thank you :) – kanwar manraj Dec 08 '20 at 19:48
Sorry I don't understand what you did but Im glad you resolved it :) Please accept if it worked or add answer what did you do. – sonic Dec 08 '20 at 19:59

score 0 · Accepted Answer · answered Dec 08 '20 at 21:05

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.

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

2 Answers2