How To Fix the Backdrop Filter Covering the Whole Screen in Flutter

BackdropFilter in Flutter creates stylish blur effects and frosted glass effects, but it can accidentally cover your entire screen. This guide provides easy fixes to control the blur area and achieve your desired UI design.

How to fix BackdropFilter Blur in Flutter?

Generally, Without a clip, BackdropFilter defaults to blurring the entire screen.

Solution 1: Using a ClipRRect Widget

You can fix it by adding a ClipRRect widget to limit the filter’s area.

Wrap your BackdropFilter in a ClipRRect widget. Customize the ClipRRect to define the desired blur area.

    ClipRect(
        // clips to the container's dimentions
        child: BackdropFilter(
          filter: ui.ImageFilter.blur(
            sigmaX: 10.0,
            sigmaY: 10.0,
          ),
          child: Container(
            alignment: Alignment.center,
            width: 100.0,
            height: 100.0,
            child: Text('100x100'),
          ),
        ),
      ),

Remember that the ClipRRect clips the widget to the width and height of the container that was given as a child.

Solution 2: Using a Container Widget with Clip Properties

Alternatively, use a Container with clipBehavior: Clip.hardEdge

Container(
  clipBehavior: Clip.hardEdge,
  decoration: const BoxDecoration(),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
    child: Container(
      color: Colors.white.withOpacity(0.25),
    ),
  ),
)

Use a Container with the clip behavior set to Clip.hardEdge to limit the blur effect.

Without a clip, the filter effect will spread upwards until it finds a boundary. clipBehavior: Clip.hardEdge prevents the blur effect from extending beyond its container’s boundaries.

In simple terms, Clip.hardEdge acts like a box with no lid. The blur effect can’t spill out beyond the edges of this box.

Remember, controlling BackdropFilter blur in Flutter often comes down to Clipping it correctly. Now you can create beautiful glass blur effects (frosted glass) without sacrificing the rest of your layout.