How to Blur a Widget in Flutter

Photo by Artur Shamsutdinov on Unsplash

Flutter, the cross-platform UI toolkit developed by Google, has gained immense popularity among developers for its simplicity and flexibility in recent years. It allows developers to build beautiful, interactive user interfaces with ease. One of the key elements in creating visually appealing designs is the ability to apply various effects to widgets. Among these effects, blurring stands out as a powerful technique that adds an element of depth and sophistication to your app's UI.

Blurring widgets in Flutter can be a daunting task for beginners, but fear not! In this comprehensive guide, we will go through the process of blurring a widget step by step. Whether you want to blur an entire screen or a specific widget, this article will equip you with the techniques required to achieve this effect.

Now, let’s embark on our journey to blur widgets in Flutter.

• Utilizing the ImageFiltered Widget
  Leverage Flutter’s built-in ImageFiltered widget to apply a blur filter to a widget.

Container(
  width: 200,
  height: 200,
  child: ImageFiltered(
      imageFilter: ImageFilter.blur(sigmaX: blurValue, sigmaY: blurValue),
      child: Text("This widget is blurred"),
    ),
  ),
)

Use ImageFiltered widget when you want to blur the child widget.

Output of using ImageFiltered

• Utilizing the BackdropFilter Widget
  Use BackdropFilter widget to apply a blur filter to everything on the screen except the child widget widget.

Container(
  width: 200,
  height: 200,
  child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: blurValue, sigmaY: blurValue),
      child: Text("This widget is not blurred"),
    ),
  ),
)

Output of using BackdropFilter

You have reached the end of this guide, you now have a comprehensive understanding of how to blur widgets in Flutter, empowering you to create visually stunning and engaging user interfaces for your Flutter applications.

Thanks for reading. If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.