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

score 6 · Accepted Answer · answered Oct 12 '20 at 08:57

6

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,
  ),
)

answered Oct 12 '20 at 08:57

Giorgio

2,137
3
20
40

ImageFiltered class was what I was looking for. Thank you so much! I learned a lot! – CrimsonFoot Oct 12 '20 at 09:10

Narritt · Answer 2 · 2020-10-12T09:35:04.500

3

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)
    )
  ]
)

edited Oct 12 '20 at 09:35

answered Oct 12 '20 at 08:40

Narritt

67
1
10

How can I blur the image itself on Flutter?

2 Answers2