Backdrop filter (blur effects) in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a blur effect using BackdropFilter.

Flutter

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: [1], sigmaY: 5),
  child: Container(color: Colors.black.withOpacity(0)),
)

Drag options to blanks, or click blank then click option'

A10

B0

C5

D15

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 results in no blur.

Using a very high number causes heavy blur.

The sigmaX controls the horizontal blur amount. Setting it to 5 applies a moderate blur.

2fill in blank

medium

Complete the code to import the package needed for ImageFilter.

Flutter

import 'package:flutter/material.dart';
import '[1]';

Drag options to blanks, or click blank then click option'

Adart:ui

Bpackage:flutter/widgets.dart

Cpackage:flutter/rendering.dart

Ddart:async

Attempts:

3 left

💡 Hint

Common Mistakes

Importing widget or rendering packages instead of dart:ui.

The dart:ui package provides the ImageFilter class needed for blur effects.

3fill in blank

hard

Fix the error in the code by completing the missing widget to apply the blur effect.

Flutter

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

Drag options to blanks, or click blank then click option'

ABackdropFilter

BBlurFilter

CFilterBlur

DImageFilterWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent widgets like BlurFilter or ImageFilterWidget.

The BackdropFilter widget applies a filter to the background behind its child.

4fill in blank

hard

Fill both blanks to create a blurred background with a semi-transparent overlay.

Flutter

Stack(
  children: [
    Image.network('https://example.com/image.jpg'),
    [1](
      filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
      child: Container(color: Colors.black.withOpacity([2])),
    ),
  ],
)

Drag options to blanks, or click blank then click option'

ABackdropFilter

BOpacity

C0.3

D0.7

Attempts:

3 left

💡 Hint

Common Mistakes

Using Opacity widget instead of BackdropFilter for blur.

Using too high opacity making overlay too dark.

Use BackdropFilter to blur the background and set the overlay opacity to 0.3 for a subtle dark effect.

5fill in blank

hard

Fill all three blanks to create a blurred circular avatar with a blur radius and opacity.

Flutter

ClipOval(
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: [1], sigmaY: [2]),
    child: Container(
      width: 100,
      height: 100,
      color: Colors.white.withOpacity([3]),
      child: Image.asset('avatar.png'),
    ),
  ),
)

Drag options to blanks, or click blank then click option'

A4

B6

C0.5

D0.8

Attempts:

3 left

💡 Hint

Common Mistakes

Using different values for sigmaX and sigmaY causing uneven blur.

Using opacity too high or too low.

Using sigmaX and sigmaY as 6 applies a strong blur. Opacity 0.5 gives a balanced transparent overlay.

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