Blur filter isn't clipped when using border radius #115926
Description
Steps to Reproduce
- GitHub repo with reproducible example
- Run the app on iOS device, preferably iOS simulator
Expected results:
When adding a border radius to a widget, blur should be cut of to follow the radius of the widget
Actual results:
When adding a border radius to a widget, the blur stays the original size of the widget without the border radius
Code sample
// BlurredBlock.dart
// Container as a BackdropFilter child wrapped in ClipRect that has a given border radius
return ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: 800,
height: 800,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.5),
borderRadius: BorderRadius.circular(500),
),
child: const Center(
child: Text('Blurred block 1'),
),
),
),
);// main.dart
// Renders Stack with Google Maps widget and BlurredBlock widget positioned on top of it in the center
const Center(
child: BlurredBlock(),
)Logs
[✓] Flutter (Channel master, 3.5.0-12.0.pre.175, on macOS 13.0 22A380 darwin-x64, locale en-HR)
• Flutter version 3.5.0-12.0.pre.175 on channel master at /Users/erikkiralj/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 92f10ed712 (2 weeks ago), 2022-11-08 17:57:52 -0800
• Engine revision e7d7edab98
• Dart version 2.19.0 (build 2.19.0-374.0.dev)
• DevTools version 2.19.0
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at /Users/erikkiralj/Library/Android/sdk
• Platform android-33, build-tools 32.0.0
• Java binary at: /Users/erikkiralj/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14B47b
• 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 /Users/erikkiralj/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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)
[✓] Android Studio (version 2021.2)
• Android Studio at /Users/erikkiralj/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/212.5712.43.2112.8815526/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)
[✓] VS Code (version 1.73.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.52.0
[✓] Connected device (3 available)
• iPad Pro (12.9-inch) (6th generation) (mobile) • ACDD46C2-E0C9-4F97-8E7C-DF60FC3EDF80 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
• macOS (desktop) • macos • darwin-x64 • macOS 13.0 22A380 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 107.0.5304.110
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
Screenshot:
