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.