🐛 Bug: BackdropFilter (Glass Blur) does not work over WebView
bug
### Is there an existing issue for this?
- [x] I have searched the existing issues
### Current Behavior
When trying to apply a glass blur effect using BackdropFilter over a WebView in Flutter, the blur effect does not render. The overlay appears transparent without any background blur.
### Expected Behavior
<img width="312" height="627" alt="Image" src="https://github.com/user-attachments/assets/c78f04c7-3c00-4e78-9e05-8c76fe7f1277" />
### Steps with code example to reproduce
### Steps to reproduce
📌 Description
When trying to apply a glass blur effect using `BackdropFilter` over a `WebView` in Flutter, the blur effect does not render. The overlay appears transparent without any background blur.
🎯 Expected Behavior
`BackdropFilter` should blur the content behind it, including WebView content, to achieve a glassmorphism (frosted glass) effect.
❌ Actual Behavior
* Blur effect is **not applied**
* WebView content remains sharp
* Only overlay UI (opacity, color) is visible
* Works correctly when used over normal Flutter widgets, but **fails over WebView**
🔁 Steps to Reproduce
1. Add a `WebViewWidget` to the screen
2. Wrap an overlay widget with `BackdropFilter`
3. Place it above the WebView using `Stack`
4. Run the app
### 💻 Sample Code
```dart
Stack(
children: [
InAppWebView(
key: const Key("webview"),
gestureRecognizers: {Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer())},
initialUrlRequest: URLRequest(
url: WebUri.uri(
Uri.parse(
viewModel.inAppBrowserArgument?.title == null
? viewModel.inAppBrowserArgument?.directLinkUrl == null
? "${viewModel.resultMktList.marketplaceUrl}"
: "${viewModel.inAppBrowserArgument!.directLinkUrl}"
: "${viewModel.resultMktList.marketplaceSearchUrl}${viewModel.inAppBrowserArgument!.title}",
),
),
),
initialSettings: InAppWebViewSettings(
automaticallyAdjustsScrollIndicatorInsets: true,
supportZoom: false,
cacheEnabled: true,
useHybridComposition: true,
offscreenPreRaster: true,
),
onConsoleMessage: (inAppWebViewController, consoleMessage) {
// log("JS Log: ${consoleMessage.message}");
},
onWebViewCreated: (controller) async {
viewModel.initializeInAppWebViewController(controller: controller);
},
onProgressChanged: (controller, progress) async {
viewModel.onWebViewProgress(controller: controller, progress: progress);
},
onLoadStart: (controller, url) async {
debugPrint("onLoadStart--->$url");
viewModel.onWebViewLoadStart(controller: controller, url: url!);
},
onLoadStop: (controller, url) async {
viewModel.onPageFinished(url: url);
},
),
Positioned(
top: 100,
left: 20,
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
width: 150,
height: 60,
color: Colors.white.withOpacity(0.2),
alignment: Alignment.center,
child: Text("Glass Button"),
),
),
),
),
],
)
```
### 📱 Environment
* Flutter version: 3.38.6
* Platform: Android / iOS
* Plugin: flutter_inappwebview: 6.1.5
### 📎 Additional Notes
This seems to be related to how WebView is rendered as a native platform view (SurfaceView/UIView), which prevents Flutter from accessing pixels behind it for blur effects.
### Expected results
<img width="312" height="627" alt="Image" src="https://github.com/user-attachments/assets/c78f04c7-3c00-4e78-9e05-8c76fe7f1277" />
### Actual results
<img width="720" height="1560" alt="Image" src="https://github.com/user-attachments/assets/258d59a6-529a-4f7e-95e6-4970c1db3704" />
### Code sample
<details open><summary>Code sample</summary>
```dart
Stack(
children: [
InAppWebView(
key: const Key("webview"),
gestureRecognizers: {Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer())},
initialUrlRequest: URLRequest(
url: WebUri.uri(
Uri.parse(
viewModel.inAppBrowserArgument?.title == null
? viewModel.inAppBrowserArgument?.directLinkUrl == null
? "${viewModel.resultMktList.marketplaceUrl}"
: "${viewModel.inAppBrowserArgument!.directLinkUrl}"
: "${viewModel.resultMktList.marketplaceSearchUrl}${viewModel.inAppBrowserArgument!.title}",
),
),
),
initialSettings: InAppWebViewSettings(
automaticallyAdjustsScrollIndicatorInsets: true,
supportZoom: false,
cacheEnabled: true,
useHybridComposition: true,
offscreenPreRaster: true,
),
onConsoleMessage: (inAppWebViewController, consoleMessage) {
// log("JS Log: ${consoleMessage.message}");
},
onWebViewCreated: (controller) async {
viewModel.initializeInAppWebViewController(controller: controller);
},
onProgressChanged: (controller, progress) async {
viewModel.onWebViewProgress(controller: controller, progress: progress);
},
onLoadStart: (controller, url) async {
debugPrint("onLoadStart--->$url");
viewModel.onWebViewLoadStart(controller: controller, url: url!);
},
onLoadStop: (controller, url) async {
viewModel.onPageFinished(url: url);
},
),
Positioned(
top: 100,
left: 20,
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
width: 150,
height: 60,
color: Colors.white.withOpacity(0.2),
alignment: Alignment.center,
child: Text("Glass Button"),
),
),
),
),
],
)
```
</details>
### Screenshots or Video
<details open>
<summary>Screenshots / Video demonstration</summary>
[Upload media here]
</details>
### Logs
<details open><summary>Logs</summary>
```console
[Paste your logs here]
```
</details>
### Flutter Doctor output
<details open><summary>Doctor output</summary>
```console
PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.
Install the latest PowerShell for new features and improvements! https://aka.ms/PSWindows
PS D:\Loopbots_work\baskitt> flutter doctor -v
[√] Flutter (Channel stable, 3.38.6, on Microsoft Windows [Version 10.0.26200.8037], locale en-US) [280ms]
• Flutter version 3.38.6 on channel stable at D:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 8b87286849 (3 months ago), 2026-01-08 10:49:17 -0800
• Engine revision 78fc3012e4
• Dart version 3.10.7
• DevTools version 2.51.1
• Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations, enable-native-assets,
omit-legacy-version-file, enable-lldb-debugging
[√] Windows Version (11 Pro 64-bit, 25H2, 2009) [1,748ms]
[√] Android toolchain - develop for Android devices (Android SDK version 36.1.0) [10.0s]
• Android SDK at D:\android-sdk
• Emulator version 36.4.9.0 (build_id 14788078) (CL:N/A)
• Platform android-36.1, build-tools 36.1.0
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
This is the JDK bundled with the latest Android Studio installation on this machine.
To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build 21.0.9+-14787801-b1163.94)
• All Android licenses accepted.
[√] Chrome - develop for the web [18ms]
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[X] Visual Studio - develop Windows apps [17ms]
X Visual Studio not installed; this is necessary to develop Windows apps.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
[√] Connected device (4 available) [749ms]
• Mi A3 (mobile) • 492fb60d2fec • android-arm64 • Android 11 (API 30)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.26200.8037]
• Chrome (web) • chrome • web-javascript • Google Chrome 146.0.7680.180
• Edge (web) • edge • web-javascript • Microsoft Edge 146.0.3856.109
[√] Network resources [1,235ms]
• All expected network resources are available.
```
</details>
### Stacktrace/Logs
<details>
<summary>Stacktrace/Logs</summary>
```
<Replace this line by pasting your stacktrace or logs here>
```
</details>
### Flutter version
3.38.6
### Operating System, Device-specific and/or Tool
All platforms
### Plugin version
flutter_inappwebview: 6.1.5
### Additional information
_No response_
### Self grab
- [ ] I'm ready to work on this issue!
0 条评论