How to create Blur Effects in Flutter (2021)

This article shows you how to create blur effects in Flutter. We’ll go through 2 complete examples. The first example makes a blurred background image and the second one, a little bit more complex and longer, adds a frosted glass effect when showing a dialog.

Overview

In order to create blur effects in Flutter, you can use BackdropFilter and ImageFilter.blur.

BackdropFilter constructor:

BackdropFilter({
  Key? key, 
  required ImageFilter filter, 
  Widget? child
})

ImageFilter.blur constructor:

ImageFilter.blur({
  double sigmaX: 0.0, 
  double sigmaY: 0.0, 
  TileMode tileMode: TileMode.clamp
})

Example 1: Blurred Background Image

Preview:

The full code:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        body: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(
                      'https://www.kindacode.com/wp-content/uploads/2021/04/background.jpeg'),
                  fit: BoxFit.cover)),
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
            child: Center(
              child: Card(
                elevation: 10,
                color: Colors.black.withOpacity(0.5),
                child: Container(
                  width: 300,
                  height: 200,
                  child: Center(
                    child: Text(
                      'Some Text',
                      style: TextStyle(
                          fontSize: 30,
                          color: Colors.white),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Example 2: Blur Screen When Showing a Dialog

In this example, the blur effect is only visible when a dialog shows up. This will blur everything on the screen except for the dialog. When this dialog goes away, the blur effect will be removed too.

Preview

The full code:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  void _show() {
    showDialog(
        context: context,
        barrierColor: Colors.transparent,
        builder: (BuildContext ctx) {
          return BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
            child: AlertDialog(
              elevation: 10,
              title: Text('Title'),
              content: Text('Some content here'),
              actions: [
                TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text('Close'))
              ],
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Kindacode.com'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(15),
            child: Column(
              // These things help make the blu effect become clearer. You can remove them to keep the code concise.
              children: [
                Container(
                  width: double.infinity,
                  height: 200,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage(
                              'https://www.kindacode.com/wp-content/uploads/2021/04/background.jpeg'),
                          fit: BoxFit.cover)),
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  width: double.infinity,
                  height: 200,
                  color: Colors.blue,
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  width: double.infinity,
                  height: 200,
                  color: Colors.orange,
                )
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _show,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

If you show a dialog without any blur effects, you’ll see this:

Final Words

You’ve learned how to implement blur effects in Flutter. Continue exploring more interesting things by reading the following articles: Flutter Draggable example, Flutter StreamBuilder examples, Flutter: Check Internet Connection without any plugins, Most Popular Packages for State Management in Flutter.

You can also have a look at our Flutter topic page or Dart topic page for the latest tutorials and examples.