Backdrop filter (blur effects) in Flutter - Mini App: Build & Ship

Build: Blurred Background Screen

This screen shows a background image with a blur effect behind a centered text box. The blur effect uses a backdrop filter to soften the background behind the text.

Target UI

┌───────────────────────────────┐
│███████████████████████████████│
│███████████████████████████████│
│███████████████████████████████│
│                               │
│        ┌───────────────┐      │
│        │  Blurred Box  │      │
│        │  with Text    │      │
│        └───────────────┘      │
│                               │
│███████████████████████████████│
│███████████████████████████████│
│███████████████████████████████│
└───────────────────────────────┘

Use a full screen background image

Apply a backdrop filter with a blur effect behind a centered container

The container should have a semi-transparent background color

Inside the container, display a text widget with the text 'Blurred Box with Text'

Ensure the blur only affects the background behind the container, not the text itself

Starter Code

Flutter

import 'dart:ui';
import 'package:flutter/material.dart';

class BlurBackgroundScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // TODO: Add background image here
          // TODO: Add centered blurred container with text here
        ],
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Flutter

import 'dart:ui';
import 'package:flutter/material.dart';

class BlurBackgroundScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          Image.network(
            'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80',
            fit: BoxFit.cover,
          ),
          Center(
            child: ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                child: Container(
                  padding: EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.3),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Text(
                    'Blurred Box with Text',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

We use a Stack to place the background image and the blurred container on top. The background image fills the screen with BoxFit.cover. The BackdropFilter applies a blur effect only behind its child. We wrap it in ClipRect to limit the blur area to the container's bounds. The container has a semi-transparent white background to show the blur effect behind it. The text inside is not blurred because it is a child of the container, not the backdrop filter itself.

Final Result

Completed Screen

┌───────────────────────────────┐
│███████████████████████████████│
│███████████████████████████████│
│███████████████████████████████│
│                               │
│        ┌───────────────┐      │
│        │  Blurred Box  │      │
│        │  with Text    │      │
│        └───────────────┘      │
│                               │
│███████████████████████████████│
│███████████████████████████████│
│███████████████████████████████│
└───────────────────────────────┘

User sees a full screen background image softly blurred behind the centered box

The text inside the box is clear and readable

No interactive elements on this screen

Stretch Goal

Add a button below the blurred box that toggles the blur effect on and off

💡 Hint

Use a StatefulWidget and a boolean to control the blur sigma values; update the UI with setState when the button is pressed

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