Flutter GestureDetector not working with video_player plugin

Issue

I’m trying to implement a feature where the video will pause and unpause when the video itself is tapped.

i don’t want separate buttons for the functionality.

when i replace the VideoPlayer widget with just text, the print statement fires.

body: FutureBuilder(
    future: _initializeVideoPlayerFuture,
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        // If the VideoPlayerController has finished initialization, use
        // the data it provides to limit the aspect ratio of the video.
        return GestureDetector(
            onTap: () {
              setState(() {
                devtools.log("Tapped");
                // If the video is playing, pause it.
                if (_controller.value.isPlaying) {
                  _controller.pause();
                } else {
                  // If the video is paused, play it.
                  _controller.play();
                }
              });
            },
            child: LayoutBuilder(
                builder: (context, constraints) =>
                    _controller.value.isInitialized
                        ? AspectRatio(
                            aspectRatio: constraints.maxWidth /
                                constraints.maxHeight,
                            // _controller.value.aspectRatio,
                            child: VideoPlayer(_controller),
                          )
                        : Container()));
      } else {
        // If the VideoPlayerController is still initializing, show a
        // loading spinner.
        return const Center(
          child: CircularProgressIndicator(),
        )

here is my initState

  void initState() {
super.initState();

// Create and store the VideoPlayerController. The VideoPlayerController
// offers several different constructors to play videos from assets, files,
// or the internet.
_controller = VideoPlayerController.network(
  widget.videoURL,
)..play();

// Initialize the controller and store the Future for later use.
_initializeVideoPlayerFuture = _controller.initialize();

// Use the controller to loop the video.
_controller.setLooping(true);

}

Solution

The issue is that you are performing a set state inside a future builder which will trigger the future to build again and in turn it will initialise the player again. I would suggest you to initialise the player in init state and create the player in the build method..and remove the future builder

void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

Answered By – Kaushik Chandru

Answer Checked By – Marilyn (FlutterFixes Volunteer)