Steps to Reproduce
Tested for Android and iOS only. It fails only on iOS.
- Run an app containing a web view and a backdrop filter with blur over some/all of the web view. (can be directly added with a Stack or as an alert with a blurred background, bottom sheet with blurred background, etc)
Expected results: There should be a blur over the web view content.
Actual results: BackdropFilter does not blur web view content in iOS. ( tried with both webview_flutter and flutter_inappwebview and the outcome is the same). This works fine on Android.
Code sample
P.S. add webview_flutter: ^3.0.4 dependency
class WebViewPage extends ConsumerWidget {
const WebViewPage({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
body: Stack(
children: [
const WebView(
initialUrl: "https://flutter.dev",
),
Positioned(
left: 100,
top: 100,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: const Text("This is a test"),
),
),
],
),
);
}
}
Logs
No errors/exceptions thrown at all
[✓] Flutter (Channel stable, 3.3.7, on macOS 12.6 21G115 darwin-x64, locale en-GB)
• Flutter version 3.3.7 on channel stable at /usr/local/Caskroom/flutter/3.0.1/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision e99c9c7cd9 (3 days ago), 2022-11-01 16:59:00 -0700
• Engine revision 857bd6b74c
• Dart version 2.18.4
• DevTools version 2.15.0
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /Users/alexandrudochioiu/Library/Android/sdk
• Platform android-33, build-tools 33.0.0
• ANDROID_HOME = /Users/alexandrudochioiu/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14A400
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.3)
• 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.13+0-b1751.21-8125866)
[✓] IntelliJ IDEA Community Edition (version 2022.1.3)
• 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.73.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.52.0
[✓] Connected device (4 available)
• 2201116TG (mobile) • LN7DPFJ7MNZXPFFA • android-arm64 • Android 12 (API 31)
• iPhone 14 (mobile) • B1C0EE1D-4F21-4D4B-8120-36AE6D6C7645 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
• macOS (desktop) • macos • darwin-x64 • macOS 12.6 21G115 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 103.0.5060.53
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
Steps to Reproduce
Tested for Android and iOS only. It fails only on iOS.
Expected results: There should be a blur over the web view content.
Actual results: BackdropFilter does not blur web view content in iOS. ( tried with both
webview_flutterandflutter_inappwebviewand the outcome is the same). This works fine on Android.Code sample
P.S. add
webview_flutter: ^3.0.4dependencyLogs