Image Filter - Flutter

Custom image filter in Flutter.

In flutter it is possible to apply filter over images using the BackdropFilter widget.

For obtaining result like above, we need to deal with the opacity and blur parameters.

Widget Tree structuring:
As we could see from the above image that, we have provided background image where we have applied the opacity and blur parameters and the image at the center is just a simple image having a fixed width and height with no effect.

Now let’s first start with the development of setting the background image for the app along with the desired filter effects.

This will generate an output like this., 👇