Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – BackDropFilter blur is not applying to Image

I wanted to blur my image, I tried this:

BackdropFilter(
  filter: ImageFilter.blur(
    sigmaX: 10,
    sigmaY: 10
  ),
  child: Image.file(
    File(imagePath),
    fit: BoxFit.cover,
  )
)

but my problem is that is not applying to the image and I am honestly no idea why?

Tags:

2

Answers


  1. 0

    BackdropFilter applies a blur only to the content behind it, not the child widget itself. In your case, since the Image.file is the direct child, the blur won’t be applied to the image as you expected. I’ve used a network image to show an example that is easy to apply.

    Stack(
      children: [
        Image.network(
          'https://picsum.photos/200/300',
          fit: BoxFit.cover,
        ),
        Positioned.fill(
          child: ClipRect(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
              child: Container(
                color: Colors.black
                    .withOpacity(0),
              ),
            ),
          ),
        ),
      ],
    ),
    Login or Signup to reply.
  2. 0

    Use ImageFiltered. It’s more performant.

    ImageFiltered(
      imageFilter: ImageFilter.blur(
        sigmaX: 10,
        sigmaY: 10,
        tileMode: TileMode.decal,
      ),
      child: Image(image: _imageProvider, fit: BoxFit.cover),
    );

    BackdropFilter created for "Frosted Glass" effect to blur background.

    Also, BackdropFilter blurs everything behind your widget and ImageFiltered affects only it’s child.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search