[Web] Clickable cursor shown on video player when hovered from clickable items to the video_player

[matthew-carroll]

I have a Stack with a VideoPlayer sitting behind various other UI elements. It appears that the VideoPlayer prevents the expected hand cursor for any button shown on top of the VideoPlayer. It also prevents direct usage of a MouseRegion, too. If I comment out the VideoPlayer, the buttons correctly show the hand cursor.

I assume this is the result of automatic decisions about what kind of web elements to use for this subtree?

Here is a simplified version of my widget tree for reproduction. I don't think my use of SizedBox and FittedBox are relevant, but I included them just in case.

Stack(
        children: [
          _videoController.value.initialized
              ? SizedBox.expand(
                  child: FittedBox(
                    fit: BoxFit.cover,
                    child: SizedBox(
                      width: _videoController.value.size?.width ?? 0,
                      height: _videoController.value.size?.height ?? 0,
                      child: VideoPlayer(
                        _videoController,
                      ),
                    ),
                  ),
                )
              : SizedBox(),
          Center(
            child: RaisedButton(
              child: Text('Click Me!'),
              onPressed: () {
                print('Pressed');
              },
            ),
          ),
      ]
),

---

Flutter 1.21.0-1.0.pre • channel master • https://github.com/flutter/flutter.git Framework • revision 6eaaf1650e (2 weeks ago) • 2020-07-09 18:04:37 -0700 Engine • revision 9b3e3410f0 Tools • Dart 2.9.0 (build 2.9.0-20.0.dev 06cb010247)

[jameswasher]

I have a related issue which I think probably has the same underlying problem. I'm unable to change the mouse cursor when wrapping a VideoPlayer in an InkWell and setting the mouseCursor property.

[ferhatb]

/cc @yjbanov , looks like platform gesture issue.

[TahaTesser]

video_player: ^0.10.12

code sample

```dart import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Material App', theme: ThemeData.dark(), home: Home(), ); } } class Home extends StatefulWidget { @override _HomeState createState() => _HomeState(); } class _HomeState extends State { VideoPlayerController _videoController; @override void initState() { super.initState(); _videoController = 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(() {}); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Material App Bar'), ), body: Stack(children: [ // Comment this to make cursor work _videoController.value.initialized ? SizedBox.expand( child: FittedBox( fit: BoxFit.cover, child: SizedBox( width: _videoController.value.size?.width ?? 0, height: _videoController.value.size?.height ?? 0, child: VideoPlayer( _videoController, ), ), ), ) : SizedBox(), Center( child: RaisedButton( child: Text('Click Me!'), onPressed: () { print('Pressed'); }, ), ), ]), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () {}, ), ); } } ```

flutter doctor -v

``` [✓] Flutter (Channel dev, 1.21.0-9.0.pre, on Mac OS X 10.15.6 19G2021, locale en-GB) • Flutter version 1.21.0-9.0.pre at /Users/tahatesser/Code/flutter_dev • Framework revision 7c6f9dd239 (12 days ago), 2020-08-09 10:31:03 -0400 • Engine revision 6d86e67f04 • Dart version 2.10.0 (build 2.10.0-4.0.dev 0341576448) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1) • Android SDK at /Users/tahatesser/Code/sdk • Platform android-30, build-tools 30.0.1 • ANDROID_HOME = /Users/tahatesser/Code/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 11.6) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.6, Build version 11E708 • CocoaPods version 1.9.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.0) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin version 48.1.2 • Dart plugin version 193.7361 • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) [✓] VS Code (version 1.48.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.13.2 [✓] Connected device (4 available) • Taha’s iPhone (mobile) • 00008020-001059882212002E • ios • iOS 13.6.1 • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.6 19G2021 • Web Server (web) • web-server • web-javascript • Flutter Tools • Chrome (web) • chrome • web-javascript • Google Chrome 84.0.4147.135 • No issues found! ```

[maheshj01]

Hi @matthew-carroll, Thanks for filing the issue, I verified this issue on the latest stable and the master channel and I could see the cursor changing to clickable cursor when hovered on the button with video in background, But when the button loses the hover the handcursor doesn't change back to normal. So it looks like this isn't fixed yet. The behaviour is similar on both safari and chrome browsers.

code sample

``` import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; void main() { runApp( MaterialApp( home: CodeSample(), ), ); } class CodeSample extends StatefulWidget { @override CodeSampleState createState() => CodeSampleState(); } class CodeSampleState extends State { late VideoPlayerController _videoController; @override void initState() { super.initState(); _videoController = 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(() {}); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Material App Bar'), ), body: Stack(children: [ // Comment this to make cursor work _videoController.value.isInitialized ? SizedBox.expand( child: FittedBox( fit: BoxFit.cover, child: SizedBox( width: _videoController.value.size.width ?? 0, height: _videoController.value.size.height ?? 0, child: VideoPlayer( _videoController, ), ), ), ) : SizedBox(), Center( child: ElevatedButton( child: Text('Click Me!'), onPressed: () { print('Pressed'); }, ), ), ]), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () {}, ), ); } } ```

Output

https://user-images.githubusercontent.com/31410839/123982265-814ad980-d9e0-11eb-9188-089a89861eaa.mov

flutter doctor -v

``` [✓] Flutter (Channel stable, 2.2.2, on macOS 11.4 20F71 darwin-arm, locale en-IN) • Flutter version 2.2.2 at /Users/mahesh/Documents/flutter • Framework revision d79295af24 (3 weeks ago), 2021-06-11 08:56:01 -0700 • Engine revision 91c9fc8fe0 • Dart version 2.13.3 [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Users/mahesh/Library/Android/sdk • Platform android-30, build-tools 30.0.3 • ANDROID_HOME = /Users/mahesh/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.4, Build version 12D4e • CocoaPods version 1.10.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) [✓] IntelliJ IDEA Community Edition (version 2021.1.2) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 57.0.5 • Dart plugin version 211.7233 [✓] VS Code (version 1.57.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.23.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 11.4 20F71 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.114 • No issues found! ``` ``` [✓] Flutter (Channel master, 2.3.0-17.0.pre.538, on macOS 11.4 20F71 darwin-arm, locale en-IN) • Flutter version 2.3.0-17.0.pre.538 at /Users/mahesh/Documents/flutter_master • Upstream repository https://github.com/flutter/flutter.git • Framework revision 1fd2f7c400 (3 days ago), 2021-06-27 22:51:02 -0400 • Engine revision 5d287a2061 • Dart version 2.14.0 (build 2.14.0-250.0.dev) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Users/mahesh/Library/Android/sdk • Platform android-30, build-tools 30.0.3 • ANDROID_HOME = /Users/mahesh/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.4, Build version 12D4e • CocoaPods version 1.10.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) [✓] IntelliJ IDEA Community Edition (version 2021.1.2) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 57.0.5 • Dart plugin version 211.7233 [✓] VS Code (version 1.57.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.23.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 11.4 20F71 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.114 • No issues found! ```

[mhnrahmani]

Stacking a zero-opacity container over the VideoPlayer resolves it. Add this child: Container(color: Colors.black.withOpacity(0.0)) in your Stack list right after the child that includes VideoPlayer. With this invisible widget on top, the VideoPlayer can no longer prevent the intended behavior of mouse cursor in response to hovering over say a Button or a MouseRegion.

Stack(
      children: [
        _videoController.value.isInitialized
            ? SizedBox.expand(
                child: FittedBox(
                  fit: BoxFit.cover,
                  child: SizedBox(
                    width: _videoController.value.size.width,
                    height: _videoController.value.size.height,
                    child: VideoPlayer(_videoController),
                  ),
                ),
              )
            : const SizedBox(),
        Container(color: Colors.black.withOpacity(0.0)),
        Center(
          child: RaisedButton(
            child: Text('Click Me!'),
            onPressed: () {
              print('Pressed');
            },
          ),
        ),
      ],
    ),

[dam-ease]

I am able to reproduce this issue using the latest version of the video_player package and on the latest stable and master channels. Code Sample

flutter doctor -v

```bash [✓] Flutter (Channel master, 3.11.0-2.0.pre.55, on macOS 13.3 22E252 darwin-arm64, locale en-NG) • Flutter version 3.11.0-2.0.pre.55 on channel master at /Users/dammya/fvm/versions/master • Upstream repository https://github.com/flutter/flutter.git • Framework revision 835b892d7f (12 days ago), 2023-05-07 01:30:22 +0530 • Engine revision 23f730efbf • Dart version 3.1.0 (build 3.1.0-83.0.dev) • DevTools version 2.23.1 [✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) • Android SDK at /Users/dammya/Library/Android/sdk • Platform android-33, build-tools 32.1.0-rc1 • ANDROID_HOME = /Users/dammya/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E222b • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.2) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) [✓] IntelliJ IDEA Community Edition (version 2022.3.2) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart [✓] VS Code (version 1.78.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] VS Code (version 1.78.0) • VS Code at /Users/dammya/.Trash/Visual Studio Code 20.07.05.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (4 available) • sdk gphone arm64 (mobile) • emulator-5554 • android-arm64 • Android 11 (API 30) (emulator) • iPhone 14 Pro Max (mobile) • D7F3302D-D66F-4B89-B8CF-DBEE1CDB5449 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 13.3 22E252 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 113.0.5672.126 [✓] Network resources • All expected network resources are available. • No issues found! ``` ```bash [✓] Flutter (Channel stable, 3.10.1, on macOS 13.3 22E252 darwin-arm64, locale en-NG) • Flutter version 3.10.1 on channel stable at /Users/dammya/sdks/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision d3d8effc68 (31 hours ago), 2023-05-16 17:59:05 -0700 • Engine revision b4fb11214d • Dart version 3.0.1 • DevTools version 2.23.1 [✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) • Android SDK at /Users/dammya/Library/Android/sdk • Platform android-33, build-tools 32.1.0-rc1 • ANDROID_HOME = /Users/dammya/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E222b • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.2) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) [✓] IntelliJ IDEA Community Edition (version 2022.3.2) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart [✓] VS Code (version 1.78.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] VS Code (version 1.78.0) • VS Code at /Users/dammya/.Trash/Visual Studio Code 20.07.05.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (4 available) • sdk gphone arm64 (mobile) • emulator-5554 • android-arm64 • Android 11 (API 30) (emulator) • iPhone 14 Pro Max (mobile) • D7F3302D-D66F-4B89-B8CF-DBEE1CDB5449 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 13.3 22E252 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 113.0.5672.126 [✓] Network resources • All expected network resources are available. • No issues found! ```