How can I blur the image itself on Flutter?

Question

Recently, I tried to blur the image. But the method using BackDropFilter only makes the blurry effect on the image but doesn't blur the image itself.

What I want to do is to blur the network image itself so it doesn't have a solid border. As you know, with BackDropFilter, the image gets blurred but still has a solid and discontinuous border.

Maybe it doesn't have to be 'blurring image itself' but still I can't figure out how to blur the image with naturally-fading-out border.

Help me please. Thank you

Answer 1

You can either use a Stack where a BackdropFilter covers your image (as suggested by @Narritt), or you can use the ImageFiltered class:

import 'dart:ui';

// ...

ImageFiltered(
  imageFilter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
  child: Image.network(
    "https://picsum.photos/id/237/200/300",
    fit: BoxFit.cover,
  ),
)

Answer 2

BackDropFilter blurs every layer below it. You can use in Stack, for example:

Stack(
  children: [
    // Image you need to blur
    Align(
      alignment: Alignment(0, 0),
      child: Image.asset(path),
    ),
    // BackdropFilter
    BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0)
    )
  ]
)