Flutter Blur Image - Easy Example

Blur effect is when image shows with blurred effect where all the object present of image with border mixing with each other. In flutter to achieve right amount of blur effect on image we will use BackdropFilter widget.

Flutter Blur Image - Gaussian Blur Effect

1. Open your project's main.dart file and import material.dart and dart:ui classes.

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

2. Defining a variable and pass image URL for network image.

final String imageURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

3. Creating Container widget with fixed width and height. We are applying background image using DecorationImage.

Container(
	width: 300,
	height: 250,
	decoration: BoxDecoration(
		image: DecorationImage(
			image: NetworkImage(imageURL),
			fit: BoxFit.contain)),
	child: )

4. Defining BackdropFilter widget as child of Container widget. We are also creating a text as child to show Text above blurred image in flutter

• ImageFilter property to apply Gaussian blur in X axis and Y axis.

BackdropFilter(
	  filter: ImageFilter.blur(sigmaX: 1.8, sigmaY: 1.8),
	  child: Container(
		alignment: Alignment.center,
		child: const Text(
		  "Image Blur in Flutter",
		  textAlign: TextAlign.center,
		  style: TextStyle(
			  fontSize: 28,
			  fontWeight: FontWeight.bold,
			  color: Colors.white),
		),
	  ),
	)

5. Complete Container code with blurred image and text above image.

Container(
		width: 300,
		height: 250,
		decoration: BoxDecoration(
			image: DecorationImage(
				image: NetworkImage(imageURL),
				fit: BoxFit.contain)),
		child: BackdropFilter(
		  filter: ImageFilter.blur(sigmaX: 1.8, sigmaY: 1.8),
		  child: Container(
			alignment: Alignment.center,
			child: const Text(
			  "Image Blur in Flutter",
			  textAlign: TextAlign.center,
			  style: TextStyle(
				  fontSize: 28,
				  fontWeight: FontWeight.bold,
				  color: Colors.white),
			),
		  ),
		))
	)

Screenshot:

Source code for main.dart file:

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

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

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

  final String imageURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: Container(
                        width: 300,
                        height: 250,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: NetworkImage(imageURL),
                                fit: BoxFit.contain)),
                        child: BackdropFilter(
                          filter: ImageFilter.blur(sigmaX: 1.8, sigmaY: 1.8),
                          child: Container(
                            alignment: Alignment.center,
                            child: const Text(
                              "Image Blur in Flutter",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontSize: 28,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white),
                            ),
                          ),
                        ))))));
  }
}