Backdrop filter (blur effects) in Flutter

Introduction

Backdrop filter lets you blur or change the background behind a widget. It helps create cool see-through effects.

To blur the background behind a popup or dialog to focus attention.

To create frosted glass effects in your app design.

When you want to soften busy backgrounds behind text or buttons.

To add style by blurring images or colors behind UI elements.

Syntax

Flutter

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
  child: Widget(),
)

The filter property takes an ImageFilter object, usually a blur.

The child is the widget that appears on top of the blurred background.

Examples

Blurs the background with a mild blur behind the text.

Flutter

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
  child: Text('Blurred background'),
)

Creates a strong blur with a translucent white overlay for a frosted glass look.

Flutter

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
  child: Container(color: Colors.white.withOpacity(0.2)),
)

Sample App

This app shows an owl image as background. On top, a semi-transparent white box with blurred background behind it displays the text "Blurred Background". The blur effect softens the image behind the box.

Flutter

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          fit: StackFit.expand,
          children: [
            Image.network(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
              fit: BoxFit.cover,
            ),
            Center(
              child: ClipRect(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                  child: Container(
                    alignment: Alignment.center,
                    width: 250,
                    height: 100,
                    color: Colors.white.withOpacity(0.3),
                    child: const Text(
                      'Blurred Background',
                      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Important Notes

Always wrap BackdropFilter with ClipRect to limit the blur area.

Blurred effect works only if there is something behind the widget to blur.

Use Colors.white.withOpacity() or similar to create frosted glass style overlays.

Summary

BackdropFilter applies blur or other effects to the background behind a widget.

Use ImageFilter.blur with sigmaX and sigmaY to control blur strength.

Wrap with ClipRect to confine the blur area and combine with translucent colors for nice UI effects.