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