Backdrop filter (blur effects) in Flutter - UI Render Trace

Component - Backdrop filter (blur effects)

This UI component shows how to apply a blur effect behind a widget using a backdrop filter. It creates a frosted glass look by blurring the background behind a semi-transparent container.

Widget Tree

Scaffold
├─ Stack
│  ├─ Image (background)
│  └─ BackdropFilter
│     └─ Container (semi-transparent)
└─ Center
   └─ Text

The Scaffold holds the whole screen. Inside, a Stack places an Image as the background. On top of the image, a BackdropFilter applies a blur effect. Inside the BackdropFilter, a semi-transparent Container shows the blurred area. Finally, a Center widget places a Text label on top.

Render Trace - 7 Steps

Step 1: Scaffold

Step 2: Stack

Step 3: Image

Step 4: BackdropFilter

Step 5: Container

Step 6: Center

Step 7: Text

State Change - Re-render

Trigger:No state change in this static blur example

Before

Blur effect applied with sigmaX and sigmaY set to 5

→

After

No change, blur remains constant

Re-renders:No re-render triggered as no state changes

UI Quiz - 3 Questions

What does the BackdropFilter widget do in this UI?

A It adds a shadow to the container

B It blurs the content behind it

C It changes the color of the text

D It moves the image to the front

Key Insight

Using BackdropFilter with a blur effect lets you create a frosted glass look by blurring whatever is behind a widget. Combining it with a semi-transparent container helps the blur show nicely, making UI elements stand out while keeping background context visible.

Practice

1. What does the BackdropFilter widget do in Flutter?

easy

A. Applies a blur or visual effect to the background behind its child widget.

B. Changes the color of the widget itself.

C. Adds a shadow to the widget.

D. Animates the widget's size.

Solution

1. Step 1: Understand BackdropFilter purpose

   The BackdropFilter widget applies visual effects like blur to the background behind its child, not the child itself.

2. Step 2: Compare options

   Only Applies a blur or visual effect to the background behind its child widget. correctly describes this behavior; others describe unrelated effects.

3. Final Answer:

   Applies a blur or visual effect to the background behind its child widget. -> Option A

4. Quick Check:

   BackdropFilter = Blur background [OK]

Hint: BackdropFilter blurs background, not the widget itself [OK]

Common Mistakes:

• Thinking it blurs the widget itself
• Confusing with shadow or color changes
• Assuming it animates size

2. Which of the following is the correct way to create a blur effect with BackdropFilter in Flutter?

easy

A. BackdropFilter(blur: 5.0, child: Widget())

B. BackdropFilter(filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0), child: Widget())

C. BackdropFilter(filter: BlurEffect(5), child: Widget())

D. BackdropFilter(effect: ImageFilter.blur(5), child: Widget())

Solution

1. Step 1: Recall BackdropFilter syntax

   BackdropFilter requires a filter parameter with ImageFilter.blur specifying sigmaX and sigmaY as doubles.

2. Step 2: Check options for correct syntax

   Only BackdropFilter(filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0), child: Widget()) uses correct parameter names and types. Others use invalid or missing parameters.

3. Final Answer:

   BackdropFilter(filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0), child: Widget()) -> Option B

4. Quick Check:

   Use filter: ImageFilter.blur with sigmaX/Y [OK]

Hint: Use filter: ImageFilter.blur with sigmaX and sigmaY [OK]

Common Mistakes:

• Using wrong parameter names like blur or effect
• Not specifying both sigmaX and sigmaY
• Passing integers instead of doubles

3. What will be the visible effect of this Flutter code snippet?

ClipRect(
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
    child: Container(
      color: Colors.black.withOpacity(0.2),
      width: 100,
      height: 100,
    ),
  ),
)

medium

A. A blurred container with sharp edges outside the 100x100 area.

B. A solid black square with no blur effect.

C. A fully transparent square with no visible effect.

D. A 100x100 area with a blurred background and a translucent black overlay.

Solution

1. Step 1: Understand ClipRect and BackdropFilter interaction

   ClipRect confines the blur effect to the 100x100 area of the Container child.

2. Step 2: Analyze Container color and blur

   The Container has a translucent black color, so the blurred background will show behind it with a dark overlay.

3. Final Answer:

   A 100x100 area with a blurred background and a translucent black overlay. -> Option D

4. Quick Check:

   ClipRect + BackdropFilter = confined blur + translucent overlay [OK]

Hint: ClipRect limits blur area; translucent color overlays blur [OK]

Common Mistakes:

• Thinking blur applies outside ClipRect bounds
• Expecting solid color without transparency
• Assuming no blur because Container has color

4. Identify the error in this Flutter code using BackdropFilter:

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 5.0),
  child: Container(
    color: Colors.white.withOpacity(0.5),
  ),
)

medium

A. BackdropFilter must be wrapped in ClipRect to work properly.

B. Container color opacity cannot be less than 1.0.

C. Missing sigmaY parameter in ImageFilter.blur causes a compile error.

D. ImageFilter.blur requires integer values for sigmaX and sigmaY.

Solution

1. Step 1: Check ImageFilter.blur parameters

   ImageFilter.blur allows sigmaX without sigmaY; sigmaY defaults to sigmaX, so no error here.

2. Step 2: Understand BackdropFilter usage

   BackdropFilter needs to be wrapped in ClipRect to confine the blur area; otherwise, it may cause rendering issues.

3. Final Answer:

   BackdropFilter must be wrapped in ClipRect to work properly. -> Option A

4. Quick Check:

   BackdropFilter requires ClipRect wrapper [OK]

Hint: Always wrap BackdropFilter with ClipRect to avoid rendering issues [OK]

Common Mistakes:

• Assuming sigmaY is mandatory
• Thinking opacity must be 1.0
• Believing sigmaX and sigmaY must be integers

5. You want to create a frosted glass effect on a 200x200 widget area with a blur radius of 8 and a white translucent overlay. Which Flutter widget tree correctly achieves this?

hard

A. BackdropFilter(filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0), child: Container(width: 200, height: 200, color: Colors.white.withOpacity(0.3)))

B. ClipOval(child: BackdropFilter(filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0), child: Container(width: 200, height: 200, color: Colors.white.withOpacity(0.3))))

C. ClipRect(child: BackdropFilter(filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0), child: Container(width: 200, height: 200, color: Colors.white.withOpacity(0.3))))

D. ClipRect(child: Container(width: 200, height: 200, color: Colors.white.withOpacity(0.3), child: BackdropFilter(filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0))))

Solution

1. Step 1: Use ClipRect to confine blur area

   ClipRect limits the blur effect to the 200x200 area, preventing blur outside bounds.

2. Step 2: Place BackdropFilter with blur filter and translucent Container

   BackdropFilter applies blur behind the translucent white Container, creating frosted glass effect.

3. Step 3: Check widget order

   BackdropFilter must be child of ClipRect, and Container must be child of BackdropFilter for correct layering.

4. Final Answer:

   ClipRect(child: BackdropFilter(filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0), child: Container(width: 200, height: 200, color: Colors.white.withOpacity(0.3)))) -> Option C

5. Quick Check:

   ClipRect + BackdropFilter + translucent Container = frosted glass [OK]

Hint: Wrap BackdropFilter in ClipRect, then add translucent Container child [OK]

Common Mistakes:

• Omitting ClipRect causing blur overflow
• Placing BackdropFilter inside Container child
• Using ClipOval instead of ClipRect for rectangular blur