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.
Table of contents
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.