Backdrop filter (blur effects) in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the BackdropFilter widget do in Flutter?

BackdropFilter applies a filter to the existing painted content beneath its child widget, such as a blur effect, making the background appear blurred behind the child.

beginner

Which class is used to create a blur effect with BackdropFilter in Flutter?

The ImageFilter class with the blur method is used, for example: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0).

intermediate

Why do you need to use a Stack widget when applying a BackdropFilter?

Stack allows layering widgets so that BackdropFilter can blur the widgets painted beneath it, creating the blur effect behind the child widget.

intermediate

What happens if you use BackdropFilter without an opaque child widget?

If the child is not opaque (like a transparent Container), the blur effect will be visible. If the child fully covers the area with an opaque color, the blur won't be visible.

beginner

How can you control the strength of the blur effect in BackdropFilter?

By adjusting the sigmaX and sigmaY values in ImageFilter.blur; higher values create stronger blur.

Which widget is used to apply a blur effect to the background in Flutter?

A BackdropFilter

B Container

C Opacity

D Transform

BackdropFilter applies a filter like blur to the painted content behind its child.

What does the sigmaX parameter control in ImageFilter.blur?

A Horizontal blur intensity

B Vertical blur intensity

C Blur color

D Blur radius in pixels

sigmaX controls the horizontal blur strength; sigmaY controls vertical blur.

Which widget helps layer widgets so BackdropFilter can blur the background?

A ListView

B Row

C Stack

D Column

Stack layers widgets on top of each other, allowing BackdropFilter to blur widgets beneath.

If the child of BackdropFilter is fully opaque, what happens to the blur effect?

A Blur is stronger

B Blur is not visible

C Blur changes color

D Blur animates

An opaque child blocks the blur effect from being visible.

Which import is needed to use ImageFilter.blur in Flutter?

A package:flutter/material.dart

B package:flutter/widgets.dart

C dart:async

D dart:ui

ImageFilter is part of dart:ui library.

Explain how to create a blur effect behind a widget using BackdropFilter in Flutter.

Think about layering widgets and applying a filter to the background.

Describe why the child widget's opacity affects the visibility of the blur effect in BackdropFilter.

Consider how the blur is applied behind the child.

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