blur background in flutter using backdropfilter

Hi Guy’s Welcome to Proto Coders Point, In this flutter article we will learn how to Blur a background in flutter by using "BackdropFilter" widget with imageFilter.blur property.

Code to Blur Background in flutter

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // Background widget
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,

            // BackdropFilter to blur the background
              filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
              child: Container(
                color:, // Adjust the opacity as needed

            // Content widget
              child: Text(
                'Hello, World!',
                style: TextStyle(fontSize: 30, color: Colors.white),


blur background in flutter using backdropfilter

The Above Code Explanation to blur a background in flutter

  1. Use a Stack widget as root widget. By using Stack widget we can stack multiple widget on top on each other.
  2. Add a Image widget as a first child of the Stack. This will be backgroud widget that will get blurred.
  3. Use BackdropFilter widget. The BackdropFilter widget applies a filter to the widget that come behind it.
  4. Set the filter property of the BackdropFilter widget to the ImageFilter.blur constructor, specifying the amount of blur you want. You can adjust the sigmaX and sigmaY values to control the blur intensity.

Video Tutorial