February 4, 2021

How to blur any widget in Flutter

By Mohit Agrawal

Blur any widget using ImageFiltered class in Flutter

flutter-blur

Introduction

Hello devs, today we are going to learn a very easy implementation to blur any widgets like text, image, card view, etc.

If you will search this on Google then you will get many results but believe me, all are a little hard to implement. Let me tell you the new and easiest way to blur any view.

Flutter has recently introduced a new class ImageFiltered. A filter operation to apply to a raster image. In this article, I will show you how to use the ImageFiltered class to blur any widget.

Let’s Code

To demonstrate the use of the ImageFiltered class, I will create a basic Flutter project which will have just an image view. Using the image filter class we will make the image blur.

STEP-1: Create a new Flutter project and delete all the boiler plate code. I am using the android studio but you are free to use visual studio as well.

STEP-2: After creating a new Flutter project, now add an ImageView and set any image to it.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.asset('assets/image.jpg',
          fit: BoxFit.cover,
          height: 800,
        ),
      ),
    );
  }
}

You can download any image from the Google and add it. It will look something like this.

flutter-blur-2

STEP-3: Now let’s wrap the Image widget with the ImageFiltered class. But this not enough. You also need the amount of blur you want to set in your widget. Using the property imageFilter you can do this.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ImageFiltered(
          imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Image.asset('assets/image.jpg',
            fit: BoxFit.cover,
            height: 800,
          ),
        ),
      ),
    );
  }
}
flutter-blur-3

As you can see in above code snippet I am setting the blur value 10 for each X and Y.

imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10)

I will strongly recommend you to play with these value and notice the changes.

Video Tutorial to blur any widget

Conclusion

As per my experience, I can tell you that this the easiest way to blur any widget in the Flutter.

Check my YouTube channel to learn more basics about Flutter, iOS and android.

Subscribe YouTube: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!