How to Create a Blur Effect on Background in Flutter

Occasionally, we may want to have some blur effects on the background. In Flutter, adding a blur effect is an easy task. You just need to make use of the BackdropFilter widget.

You can create a blur effect using BackdropFilter and ImageFilter as given below.

BackdropFilter(
              filter: ImageFilter.blur(
                sigmaX: 5,
                sigmaY: 5,
              )

Following is the complete Flutter blur effect example where the image background is blurred.

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Background Blur Example'),
        ),
        body: Container(
            constraints: const BoxConstraints.expand(),
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2022/12/05/19/36/hellebore-7637542_1280.jpg',
                ),
                fit: BoxFit.cover,
              ),
            ),
            child: BackdropFilter(
              filter: ImageFilter.blur(
                sigmaX: 5,
                sigmaY: 5,
              ),
              child: Container(
                color: Colors.black.withOpacity(0.1),
              ),
            )));
  }
}

If you just want to blur the image then the better solution is to use the ImageFiletered widget.

The output of the Flutter example is given below.