Blur filter isn't clipped when using border radius

This issue has been created since 2022-11-23.

Steps to Reproduce

  1. GitHub repo with reproducible example
  2. 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:

Simulator Screen Shot - iPad Pro (12 9-inch) (6th generation) - 2022-11-23 at 14 18 40

mario-jerkovic wrote this answer on 2022-11-24

References: #115920

danagbemava-nc wrote this answer on 2022-11-24

This doesn't seem to be an iOS-only issue as it seems to reproduce on android.

screenshots
android iOS
code sample
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: const [
            WebView(
              initialUrl: 'https://flutter.dev',
            ),
            Center(
              child: BlurredBlock(),
            )
          ],
        ),
      ),
    );
  }
}

class BlurredBlock extends StatelessWidget {
  const BlurredBlock({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final mq = MediaQuery.of(context);

    return ClipRect(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
        child: Container(
          width: mq.size.width * 0.5,
          height: mq.size.height * 0.5,
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.5),
            borderRadius: BorderRadius.circular(500),
          ),
          child: const Center(
            child: Text('Blurred block 1'),
          ),
        ),
      ),
    );
  }
}
flutter doctor -v
[✓] Flutter (Channel stable, 3.3.9, on macOS 13.0.1 22A400 darwin-arm, locale en-GB)
    • Flutter version 3.3.9 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (35 hours ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/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
    • Android Studio at /Applications/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] 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)

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview 2.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/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.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/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)

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

[✓] Connected device (5 available)
    • M2007J20CG (mobile)    • 5dd3be00                             • android-arm64  • Android 12 (API 31)
    • Nexus (mobile)         • 00008020-001875E83A38002E            • ios            • iOS 16.1.1 20B101
    • iPhone 14 Pro (mobile) • 4F72110C-F38B-4CF9-93C4-4D6042148D28 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0.1 22A400 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.
[!] Flutter (Channel master, 3.6.0-7.0.pre.45, on macOS 13.0.1 22A400 darwin-arm64, locale en-GB)
    • Flutter version 3.6.0-7.0.pre.45 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d0352f55db (8 hours ago), 2022-11-23 20:01:26 -0500
    • Engine revision 9b2895724c
    • Dart version 2.19.0 (build 2.19.0-424.0.dev)
    • DevTools version 2.19.0
    • 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 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/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
    • Android Studio at /Applications/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] 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)

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview 2.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/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.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/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)

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

[✓] Connected device (5 available)
    • M2007J20CG (mobile)    • 5dd3be00                             • android-arm64  • Android 12 (API 31)
    • Nexus (mobile)         • 00008020-001875E83A38002E            • ios            • iOS 16.1.1 20B101
    • iPhone 14 Pro (mobile) • 4F72110C-F38B-4CF9-93C4-4D6042148D28 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0.1 22A400 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 3 categories.

K-Rafiki wrote this answer on 2022-11-24
class BlurredBlock extends StatelessWidget {
  const BlurredBlock({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final mq = MediaQuery.of(context);

    return ClipRRect(
      borderRadius: BorderRadius.circular(500),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
        child: Container(
          width: mq.size.width * 0.5,
          height: mq.size.height * 0.5,
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.5),
            borderRadius: BorderRadius.circular(500),
          ),
          child: const Center(
            child: Text('Blurred block 1'),
          ),
        ),
      ),
    );
  }
}

Use the above widget. You have to use ClipRRect and give it a custom borderRadius. ClipRect is a regular rectangle.

erikkiralj1 wrote this answer on 2022-11-24

@K-Rafiki Hello, tried it with your example of BlurredBlock, the issue is still there even when using ClipRRect.

Simulator Screen Shot - iPad Pro (12 9-inch) (6th generation) - 2022-11-24 at 12 26 17

K-Rafiki wrote this answer on 2022-11-24

Did you add the
borderRadius: BorderRadius.circular(500), as a parameter of ClipRRect. Please copy the example as is.

This is how the 3 lines should look line.

return ClipRRect(
borderRadius: BorderRadius.circular(500),
child: BackdropFilter(

erikkiralj1 wrote this answer on 2022-11-24

@K-Rafiki Yes, i tried with the same example you posted.

Code
import 'dart:ui';

import 'package:flutter/material.dart';

class BlurredBlock extends StatelessWidget {
  const BlurredBlock({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final mq = MediaQuery.of(context);

    return ClipRRect(
      borderRadius: BorderRadius.circular(500),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
        child: Container(
          width: mq.size.width * 0.5,
          height: mq.size.height * 0.5,
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.5),
            borderRadius: BorderRadius.circular(500),
          ),
          child: const Center(
            child: Text('Blurred block 1'),
          ),
        ),
      ),
    );
  }
}
cyanglaz wrote this answer on 2022-11-28

Clipping the blur on PlatformView is not currently supported. It is only currently supporting a frame: https://github.com/flutter/engine/blob/main/shell/platform/darwin/ios/framework/Source/FlutterPlatformViews.mm#L505

The solution is probably propagating the mutator stack to the UIVisualEffectView, in a way that is similar to how the PlatformViews are mutated, which includes clippings.

When we use a mutator stack solution for the visual effect view, we should also double check if #115920 is fixed.

More Details About Repo
Owner Name flutter
Repo Name flutter
Full Name flutter/flutter
Language Dart
Created Date 2015-03-06
Updated Date 2022-12-10
Star Count 147243
Watcher Count 3561
Fork Count 23950
Issue Count 11325

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
WKS files causing "segmentation fault" 2 2022-05-25 2022-11-12
DynamoDB backend: Add example of creating table with CloudFormation or Terraform 0 2022-04-13 2022-07-24
SQLite objects created in a thread can only be used in that same thread 2 2021-10-11 2022-10-02
I can't open an image. 5 2022-04-26 2022-08-13
Change style of ngx-dropzone-preview 5 2020-02-21 2022-11-02
EnableTrackTrivia() is not generating valid HTML 0 2022-03-10 2022-12-08
Export missing in @automapper/classes/package.json 0 2022-07-01 2022-11-28
type-checker writes tpl file in `bin/classes` instead of `bin/` 5 2021-12-15 2022-10-05
Did a GPA and now cannot restore 3D viewer to normal 1 2022-06-25 2022-10-05
Fix recent mypy problems 0 2022-02-06 2022-10-15
Support for Basic HTTP auth? 1 2022-01-14 2022-07-24
monika cant read my gifts 39 2022-05-25 2022-09-18
[Bug]: Bottles crashes if the bottles' folder has an empty folder inside 2 2022-05-29 2022-10-31
All the contents is still waiting 1 2021-12-19 2022-10-22
exercise with three variables 0 2021-12-16 2022-11-12
How to configure Auto Startup in a route using Env variable? 0 2022-11-01 2022-12-01
Add option include_only_confirmed to blocks_info RPC command 0 2022-03-15 2022-10-02
Pin table until given column 0 2021-04-16 2022-11-22
RuntimeError: invalid argument 0: Sizes of tensors must match except in dimension 1. Got 26 and 27 in dimension 3 at /opt/conda/conda-bld/pytorch_1579022034529/work/aten/src/THC/generic/THCTensorMath.cu:71 2 2021-11-26 2022-11-23
Command for executing db query in console 0 2021-06-10 2022-11-06
Limits and "d:" in the data 1 2022-06-26 2022-11-13
Orion Dark does not allow changing the editor's background color 0 2022-08-21 2022-10-26
Azure Stack Hub - VPN Gateway - Clarify if P2S - Point to Site is supported 2 2021-12-09 2022-10-28
windows: don't make symlink fall back to copy. 0 2022-03-20 2022-10-22
Search with umlauts results in 0 search results 7 2022-07-08 2022-11-13
Additional guidance around using mode:VM when sysprepping in AIB 2 2022-11-03 2022-11-04
Problem with movie versions 10 2022-03-18 2022-03-26
Frontend tests don't work 1 2020-04-27 2022-11-28
"The `service_account_whitelist` configurable is deprecated 0 2021-09-15 2022-10-27
Generate CSR fails when Challenge Password is given 6 2020-09-02 2022-11-05
Rewrite the overview and how-it-works sections in the README 0 2021-02-24 2022-12-07
Selects first path if multiple paths present Linux 0 2022-05-03 2022-12-06
generate_bindings fails on Windows. 7 2022-07-04 2022-12-02
Script inherits from native type 'x', so it can't be instanced in object of type: 'ScriptEditorDebuggerInspectedObject' 1 2022-01-15 2022-10-07
`any` and `all` do not set $in correctly 0 2022-10-27 2022-11-22
[proposal] General ID vs name usage at CLI 3 2021-11-18 2022-12-03
ERROR: Compute environment '***' is not available 6 2021-11-18 2022-12-03
[gcloud-sqlproxy] add support for PRIVATE IPs 2 2022-02-16 2022-10-29
Error while training Estimators on CIFAR 7 2018-10-17 2022-11-13
Intel Bluetooth not working after Monterey 12.4 update 3 2022-06-07 2022-11-10
universal clipboard not fully working in monterey 12.3 1 2022-03-23 2022-11-10
Medical error when install on Odoo 14.0 1 2021-05-23 2022-11-27
'SQLEnumSyntax' and 'SQLAlterTableSyntax' missing in MySQL-kit 4.0.0-beta.3.3 1 2020-02-22 2022-09-23
Cycling custom type animation 0 2022-07-05 2022-11-29
Execute more scripts with different execution ids does not work 9 2021-12-15 2022-12-02
Add UssExchange::exchange_data_type for InterUSS interaction 1 2018-08-28 2022-12-01
Overflow not handled well 2 2022-09-02 2022-11-27
delete Mapping_el:IMDb_Name 0 2015-02-05 2022-10-22
🐛[BUG] ProList 卡片列表 onRow onClick不生效 1 2022-01-26 2022-12-03
APPLICATION FAILED TO START 2 2021-08-04 2022-11-04