How to Create a Blur Effect on Background in Flutter

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

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

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

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(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Blurred Image Background Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatelessWidget {
  FlutterExample({Key key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          constraints: BoxConstraints.expand(),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
          'https://cdn.pixabay.com/photo/2015/03/26/09/41/phone-690091_960_720.jpg',
        ),
              fit: BoxFit.cover,),),
          child: BackdropFilter(
          filter: ImageFilter.blur(
            sigmaX: 5,
            sigmaY: 5,
          ),
          child: Container(
      color: Colors.black.withOpacity(0.1),
    ),)
          
    ));
}

}

The output of the Flutter example is as 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 background in flutter then go here.

I hope this Flutter tutorial will be helpful for you.