Blur widget overflows border radius

[sirian-m]

Issue tracker is ONLY used for reporting bugs. New feature suggestions and questions should be discussed on Community or submitted through our user feedback form.

Your issue may already be reported! Please search in the issue tracker before creating one.

Please thumbs up this issue if you have also experienced it. You may also add more information if there is something relevant that was not mentioned. However, please refrain from comments that are not constructive, like "I have this problem too", etc.

Expected behavior (required)

The blur is contained within the border radius of the child backdrop widget.

Current behavior (required)

The blur overflows the border radius set by the child widget. The behavior also occurs when "Clip Content" is enabled on the child container or when the blur is wrapped in a container with the same border radius, also when "Clip Content" is enabled on that wrapping container.

To Reproduce (required)

Steps to reproduce the behavior:

1. Add blur widget
2. Enable backdrop
3. Add container widget as a child
4. Set the border radius to something larger than 0
5. Click Run
6. Observe that the backdrop blur still has sharp corners and that the set border radius is not applied

Context (required)

Create a nice rounded frosted glass container.

Screenshots / recordings

Expected:

Current:

Your environment

• Bug Report Code:
• Version of FlutterFlow used: 3.3.4
• Platform (e.g. Web, MacOS Desktop): Web
• Browser name and version: Chrome 106
• Operating system and version (desktop or mobile): Desktop

[hariprasadms]

Hi, I can test this and looks fine in my app.

I suggest try this in another page and see the consistency. If you could share the code snippet of this widget tree from the code view that would great.

[organicnz]

Hi mate,

It look fine on my test page, but I see it on a published page :)

Test page

Published page

Widget tree

[sirian-m]

Hi, I can test this and looks fine in my app.

I suggest try this in another page and see the consistency. If you could share the code snippet of this widget tree from the code view that would great.

It looks lie you don't have backdrop blur enabled, that's were I have the issue. When you enable backdrop, lower the opacity of the color of the chil container to see the backdrop. I'm not sur eif this works, bit try copying this into your widget tree:
"Cg5TdGFja181enU3YTVhORJbCg5JbWFnZV8wZ3BjY2hkNBgHIkUyQAoiaHR0cHM6Ly9waWNzdW0ucGhvdG9zL3NlZWQvMjU3LzYwMBABGAMiFgoJCQAAAAAAAPB/EgkJAAAAAAAA8H/6AwBiABLAAgoSQ29udGFpbmVyXzBjdTJjNHp6EsIBCg1CbHVyX3g2Zmh5djc1EoMBChJDb250YWluZXJfeTM3am5qbnkYASJpClAKFgoJCQAAAAAAwGJAEgkJAAAAAAAAXkASMhIkCQAAAAAAAERAEQAAAAAAAERAGQAAAAAAAERAIQAAAAAAAERAQgYIgICAwANaAGIAIgAwAHISCQAAAAAAAAAAEQAAAAAAAAAA+gMAYgAYMSIncgkJAAAAAAAAAACyAxYJAAAAAAAAOEARAAAAAAAAOEAYASAB+gMAYgAYASJhCkgKFgoJCQAAAAAAwGJAEgkJAAAAAAAAXkASKhIkCQAAAAAAAERAEQAAAAAAAERAGQAAAAAAAERAIQAAAAAAAERAWgBiACIAMAFyEgkAAAAAAAAAABEAAAAAAAAAAPoDAGIAGA8iHloJEQAAAAAAADhAggENCgsSCQkAAAAAAABpQPoDAA=="

This is the copied data from my widget tree where the issue is present in. Notice: it will show correctly in the editor, but in run mode or in a build it won't.

The generated code:

Padding( padding: EdgeInsetsDirectional.fromSTEB(0, 24, 0, 0), child: Container( height: 200, child: Stack( children: [ Image.network( 'https://picsum.photos/seed/257/600', width: double.infinity, height: double.infinity, fit: BoxFit.cover, ), Align( alignment: AlignmentDirectional(0, 0), child: ClipRRect( borderRadius: BorderRadius.circular(40), child: Container( width: 150, height: 120, decoration: BoxDecoration( borderRadius: BorderRadius.circular(40), ), child: Align( alignment: AlignmentDirectional(0, 0), child: ClipRect( child: BackdropFilter( filter: ImageFilter.blur( sigmaX: 24, sigmaY: 24, ), child: Align( alignment: AlignmentDirectional(0, 0), child: Container( width: 150, height: 120, decoration: BoxDecoration( color: Color(0x38000000), borderRadius: BorderRadius.circular(40), ), ), ), ), ), ), ), ), ), ], ), ), )

[hariprasadms]

Thanks for sharing the code snippet. It helped me to reproduce the behaviour you can see. The steps you have provided initially did't include the sigmaX: 24, sigmaY: 24 properties and its values. hence it was not able to reproduce the behaviour.
The behaviour what you can see is controlled by using sigmaX and sigmaY property values ( Look at its help tips on the editor ). At present In FF blur widget got the less properties to add more customisation and it is working as expected. to get the best out of it, you should play with its available properties and its child widget properties.

Below I have added an example which is showing blur and container widgets with colour property. If I add the border to container it can show the blur boarder around. So to hide it ,I have removed the container border property. Something like this you can try and fit few customisation.

However, I can pass this info to developer team and see if they can add more properties to change the share of blur widget. But it is going to be enhancement for the existing blur-widget.

[sirian-m]

Thanks for your response!

But I'm not entirely sure you understand what I mean. What I want is a rounded corner container with a backdrop filter blur on it which is only limited to the rounded corner container (similar as to what Apple uses a lot). The problem is that this backdrop blur does currently not adhere to the set border radius on the child container.

I want to achieve this:

But FF currently does this, it doesn't clip the backdrop blur as you can see:

Same issue was posted on the forum as well, without a solution:
https://community.flutterflow.io/c/suggestions-and-feedback/blur-effect-bleeds-outside-containers-with-rounded-edges
https://community.flutterflow.io/c/suggestions-and-feedback/border-radius-for-blur-effect

[katherineqian]

This will be fixed in the next release.