[BUG] Cannot use ClipRRect or ClipPath on YoutubePlayer Widget

[Beto-Beto-Salamander]

Is there an existing issue for this?

• I have searched the existing issues

Package

youtube_player_flutter

What happened?

Hi,
I'm facing a problem here, the top section of this widget should be rounded like the bottom but it remains flat
I've tried to use ClipRRect and ClipPath but it doesn't work at all
I only tested on iOS Simulator (iPhone 15 Pro Max, iOS 17.5)

What is the expected behaviour?

The top section will have rounded corner when I'm scrolling, you can see in this video below
It looks like there is something in front of this widget
https://github.com/user-attachments/assets/76752776-e049-4bab-a1be-c3e8a926f26c

How to reproduce?

  CardContainer(
                color: MangappColor.keychain,
                child: MangappColumn(
                  children: [
                    Stack(
                      children: [
                        videoController != null
                            ? YoutubePlayer(
                                controller: videoController!,
                                showVideoProgressIndicator: true,
                                progressIndicatorColor:
                                    MangappColor.keychainLight,
                                bufferIndicator: MangappLoadingIndicator(
                                  isVerticalAlign: true,
                                  isWithText: true,
                                ),
                                progressColors: const ProgressBarColors(
                                  playedColor: MangappColor.verified,
                                  handleColor: MangappColor.verified,
                                ),
                                onReady: () {
                                  isPlayerReady = true;
                                  videoController?.setVolume(10);
                                  setState(() {});
                                },
                              ) : SizedBox(
                                height: 128.msp,
                              ),
                        if (isPlayerReady)
                          Positioned(
                            bottom: Spacing.small.msp,
                            right: Spacing.small.msp,
                            child:
                                MangappIconButton.secondaryBlackWithWhiteBase(
                             ...
                            ),
                          ),

The Card Container

Container(
     ...
      child: Stack(
        children: [
          ClipPath(
            clipper: ShapeBorderClipper(
              shape: ContinuousRectangleBorder(
                borderRadius: BorderRadius.circular(48),
                ....
              ),
            ),
            child: Container(
              ....
              decoration: BoxDecoration(
               ...
              ),
              child: Padding(
               ...
                child: child,
              ),
            ),
          ),
          if (onPressed != null)
            InkwellWrapper(
              onPressed: () => onPressed?.call(),
            ),
        ],
      ),
    );

Flutter Doctor Output

[flutter] flutter doctor -v

┌─────────────────────────────────────────────────────────┐
│ A new version of Flutter is available!                  │
│                                                         │
│ To update to the latest version, run "flutter upgrade". │
└─────────────────────────────────────────────────────────┘
[!] Flutter (Channel stable, 3.24.1, on macOS 15.0.1 24A348 darwin-arm64, locale en-ID)
    • Flutter version 3.24.1 on channel stable at /Users/ryanoctavius/flutter
    ! The flutter binary is not on your path. Consider adding /Users/ryanoctavius/flutter/bin to your path.
    ! The dart binary is not on your path. Consider adding /Users/ryanoctavius/flutter/bin to your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5874a72aa4 (9 weeks ago), 2024-08-20 16:46:00 -0500
    • Engine revision c9b9d5780d
    • Dart version 3.5.1
    • DevTools version 2.37.2
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/ryanoctavius/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16A242d
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.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 17.0.11+0-17.0.11b1207.24-11852314)

[✓] VS Code (version 1.94.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.98.0

[✓] Connected device (6 available)
    • Ryan’s iPhone (mobile)          • 00008030-000C783C3A3B802E            • ios            • iOS 17.6.1 21G93
    • Ryan aipon (mobile)             • 00008110-000819063AB9801E            • ios            • iOS 18.0.1 22A3370
    • iPhone 15 Pro Max (mobile)      • 0E05B253-6F09-45A5-99C1-61C803F866B3 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-5 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 15.0.1 24A348 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 15.0.1 24A348 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome 129.0.6668.103

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
exit code 0

[joaopegoraro]

While that's not fixed, using the YoutubePlayerScaffold works to customize the player:

                      YoutubePlayerScaffold(
                        controller: _youtubeController,
                        builder: (_, Widget player) {
                          return ClipRRect(
                            borderRadius: BorderRadius.circular(8.0),
                            child: player,
                          );
                        },
                      ),