flutter / flutter/flutter

Video does not work with ShaderMask

Open
#161,064 11 comments 0 reactions 0 assignees View on GitHub
found in release: 3.27 found in release: 3.28 framework has reproducible steps P3 team-framework triaged-framework
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

Checkout https://github.com/willsmanley/video_shader

### Expected results

Video should be masked to only be visible through the text, just like in the working image shader example.

Here is a working example in JS of using a video as a text background: https://video-background-b9b.pages.dev/

The flutter widget of the week video from 2020 actually shows a video mask working with flames at the very end, but does not provide source code for it: https://www.youtube.com/watch?v=7sUL66pTQ7Q

### Actual results

Video overflows the text and is not masked.

### Code sample

https://github.com/willsmanley/video_shader

### Screenshots or Video

_No response_

### Logs

_No response_

### Flutter Doctor output

[✓] Flutter (Channel stable, 3.24.4, on macOS 15.1 24B83 darwin-arm64, locale en-US)
• Flutter version 3.24.4 on channel stable at /Users/admin/flutter/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 603104015d (2 months ago), 2024-10-24 08:01:25 -0700
• Engine revision db49896cf2
• Dart version 3.5.4
• DevTools version 2.37.3

[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/to/macos-android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.

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

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

[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/to/macos-android-setup for detailed instructions).

[✓] Connected device (3 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 15.1 24B83 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 15.1 24B83 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 131.0.6778.205

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.