Hide mouse cursor when it hovers over a VideoPlayer object in flutter web

Issue

In order to change the cursor on hovering over certain widgets, I’ve been using MouseRegion which works perfectly in combination with different child widgets. However, it doesn’t work when it comes to VideoPlayer as its child.

What I want, is to hide the mouse cursor when it hovers over a video which I’m handling with flutter’s video_player plugin and here’s my simplified code:

MouseRegion(
  cursor: SystemMouseCursors.none,
  child: AspectRatio(
    aspectRatio: _controller.value.aspectRatio,
    child: Stack(
      children: [
        VideoPlayer(_controller),
        GestureDetector(
          onTap: () {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          },
        ),
      ],
    ),
  ),
)

When the video box first appears on top of the mouse cursor (on creation of the widget), the cursor disappears as intended; however, by moving it outside and reentering to the video box, it remains visible. I searched a lot to figure out the problem and I found this open issue much related to what I am experiencing. However, I still believe that hiding the cursor on top of a playing video should be simple because that’s simply what happens on say YouTube, a few seconds after a video is playing. Any solution will be appreciated.

I’ve run my code in Chrome browser and here’s my flutter doctor -v:

[√] Flutter (Channel stable, 2.10.3, on Microsoft Windows [Version 10.0.22000.493], locale en-BE)
    • Flutter version 2.10.3 at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (8 days ago), 2022-03-02 11:23:12 -0600
    • Engine revision bd539267b4
    • Dart version 2.16.1
    • DevTools version 2.9.2

Solution

Stacking a zero-opacity container over the video, seems to be a workaround:

Container(color: Colors.black.withOpacity(0.0))

This container is invisible and expands itself to the boundaries of the video. The specified cursor (none in this case), will then always show when the mouse hovers or stops over the video box. The code will then look like this:

MouseRegion(
  cursor: SystemMouseCursors.none,
  child: AspectRatio(
    aspectRatio: _controller.value.aspectRatio,
    child: Stack(
      children: [
        VideoPlayer(_controller),
        Container(color: Colors.black.withOpacity(0.0)),
        GestureDetector(
          onTap: () {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          },
        ),
      ],
    ),
  ),
)

Answered By – mhr

Answer Checked By – Robin (FlutterFixes Admin)