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.

You can adjust the value of sigmaX and sigmaY to get the desired blur effect.

If you want to know how to set an image as a background in flutter then go here.

I hope this Flutter tutorial is helpful for you.