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.