Backdrop filter (blur effects) in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visual effect of this Flutter code snippet?

Consider this Flutter widget tree snippet that uses a BackdropFilter with a blur effect. What will the user see on the screen?

Flutter

Stack(
  children: [
    Image.asset('background.jpg'),
    BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
      child: Container(
        color: Colors.black.withOpacity(0),
      ),
    ),
  ],
)

A The background image appears sharp with no blur effect.

B The background image is fully hidden by a black overlay with no blur.

C The background image appears blurred behind a transparent overlay.

D The background image is replaced by a solid black color.

💡 Hint

BackdropFilter applies a blur to the content behind it, but the child container's opacity affects visibility.

BackdropFilter with ImageFilter.blur applies a blur effect to the widgets behind it in the stack. The child Container with transparent color allows the blur to be visible without covering the background.

📝 Syntax

intermediate

Which option correctly applies a blur effect using BackdropFilter in Flutter?

Select the Flutter code snippet that correctly applies a blur effect of 10 pixels on both X and Y axes using BackdropFilter.

A BackdropFilter(filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), child: Container(color: Colors.transparent))

B BackdropFilter(filter: ImageFilter.blur(10, 10), child: Container(color: Colors.transparent))

C BackdropFilter(filter: blur(sigmaX: 10, sigmaY: 10), child: Container(color: Colors.transparent))

D BackdropFilter(filter: ImageFilter.blur(sigma: 10), child: Container(color: Colors.transparent))

💡 Hint

ImageFilter.blur requires named parameters sigmaX and sigmaY.

Option A uses the correct syntax with named parameters sigmaX and sigmaY. Other options either miss named parameters or use incorrect function calls.

❓ lifecycle

advanced

What happens if you remove the child widget inside BackdropFilter?

In Flutter, what is the effect of omitting the child widget inside a BackdropFilter widget?

Flutter

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
  // child: Container(color: Colors.transparent), // omitted
)

A The blur effect will not be visible because BackdropFilter requires a child to render.

B The blur effect will apply but the area will be filled with black color.

C The app will crash with a runtime error due to missing child.

D The blur effect will still apply normally to the background.

💡 Hint

BackdropFilter needs a child widget to define the area where the filter applies.

BackdropFilter applies the filter only to the area occupied by its child. Without a child, it has no size and thus no visible effect.

🔧 Debug

advanced

Why does this BackdropFilter blur not appear on the screen?

Given this Flutter code, why is the blur effect not visible?

Flutter

Stack(
  children: [
    Image.asset('background.jpg'),
    BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
      child: Container(color: Colors.black.withOpacity(0.5)),
    ),
  ],
)

A BackdropFilter only works with fully transparent children, so opacity 0.5 disables it.

B The semi-transparent black Container blocks the blurred background, hiding the blur effect.

C The Image.asset must be wrapped in a Positioned widget for blur to work.

D The blur effect requires sigmaX and sigmaY to be zero to be visible.

💡 Hint

Check how the child Container's color opacity affects visibility.

A semi-transparent black Container overlays the blurred background, making the blur effect invisible because the dark color covers it.

🧠 Conceptual

expert

How does BackdropFilter differ from a normal blur effect on a widget?

Which statement best describes the difference between BackdropFilter and applying a blur effect directly on a widget in Flutter?

A BackdropFilter blurs the widget itself, but normal blur affects only the background behind the widget.

B Both BackdropFilter and normal blur effects blur the widget and its children identically.

C BackdropFilter only works on images, while normal blur works on all widgets.

D BackdropFilter blurs the content behind it, while a normal blur effect blurs the widget itself and its children.

💡 Hint

Think about what is behind the BackdropFilter versus what the widget contains.

BackdropFilter applies a filter to the pixels behind its child widget, creating a blur of the background. Normal blur effects applied to a widget affect that widget's own content.

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