Repository navigation
ImageFilter widget #13489
Description
I want to implement a blur, not of the layer below my widget, but of a current widget.
Is there a widget that looks something like:
build() =>
new FilteredWidget(
filter: new ImageFilter.blur(...),
child: ...
);or should I copy RenderProxy from https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/rendering/proxy_box.dart to create one?
I also want to stack these layers, which I'm assuming requires compositing:
build() =>
new Stack(
children: [
new FilteredWidget(
filter: new ImageFilter.blur(...),
child: ...
),
new FilteredWidget(
filter: new ImageFilter.blur(...),
child: ...
),
...
);They will be blurred different amounts, so while I can use BackdropFilter, I have to order the most blurred before the least blurred, and calculate the proper blur amount to do on the first one such that blurring the second one results in the desired actual blur amount on the first. Would be much better to treat each widget as a blurred widget and composite them, than to treat each widget as blurring its prior paint.
Not sure if solving the first one gets me the second one for free, or if they are separate issues.
Activity
Hixie commentedon Dec 11, 2017
Looks like you want a widget similar to ShaderMask.
[-]Question: How to do compositing with ImageFilter directly?[/-][+]ImageFilter widget[/+]MichaelRFairhurst commentedon Dec 11, 2017
I realized I gave very little practical context: I'm doing a blur in an animation. That's why its not a backdrop, really.
sroddy commentedon Mar 18, 2018
@jonahwilliams I saw that you self-assigned this issue. Do you have a (tentative) ETA for this?
This is a road blocker for one of our projects as the performances of Backdrop Fliter are not satisfying (and we just really need to blur a static background). I need to understand if it's worth to wait for this feature or if we work around this issue pre-processing the images on the server
jonahwilliams commentedon Mar 18, 2018
@sroddy No ETA at this time, though it would be great if you could share any perf issues you are having with Backdrop Filter.
sroddy commentedon Mar 18, 2018
I'm just applying a backdrop filter on top of a static background image to obtain a blur effect of the background. Something very similar to this example: https://github.com/FlutterRocks/blurry_artist_details_page/blob/master/lib/artist_details_page.dart#L104
on top of the blurred background there is a ListView that displays paragraphs of text. Scrolling it is extremely laggy (<30 fps) on Nexus 5 and Nexus 5x and far from usable. My guess is that everything behind the backdrop filter gets rasterized on every frame even if it doesn't change instead of being rasterized just once when something changes.
Even in the example above you will notice that scrolling the horizontal listview is laggy on these devices, while if you remove the filter everything becomes smooth again.
sroddy commentedon Mar 18, 2018
@jonahwilliams
jonahwilliams commentedon Mar 18, 2018
@sroddy Thanks for the report, I'll take a look on a real device.
jonahwilliams commentedon Mar 20, 2018
@sroddy I have reproduced the issue on a Nexus 5, using a filtered image within a list view.
SkCanvas::FlushandAndroidContextGL::SwapBuffersare each taking > 15ms a frame here. I'm going to drilldown into these more. Ideally we could just apply the filter to the image once and save that new image, I'm going to look into an implementation that does just thatImage Filter: Blur
No Image Filter
sroddy commentedon Mar 21, 2018
thanks @jonahwilliams, that would be really appreciated. Please keep me posted!
12 remaining items
maryx commentedon Feb 22, 2019
I have a sample app that demonstrates the performance issues once blur is turned on. You can check it out at https://github.com/maryx/confetti and maybe it can help with debugging/resolving this issue.
Engine support for ImageFiltered widget (flutter/flutter#13489)
Engine support for ImageFiltered widget (flutter/flutter#13489)
Engine support for ImageFiltered widget (flutter/flutter#13489)
Support for ImageFiltered widget to apply ImageFilter to children.
cmkweber commentedon Jan 10, 2020
An additional use case of this widget is now realtime supersampling can be performed. This can be beneficial when doing canvas operations that do not support antialiasing (such as drawVertices). I have provided an example gist here: https://gist.github.com/cmkweber/c17aae8fa48a4853a87f242835cb65cb
flar commentedon Oct 8, 2020
dnfield commentedon Oct 8, 2020
github-actions commentedon Aug 11, 2021
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.