How to make a blur Background Image effect in Flutter using BackdropFilter. fluttercorner.com

Hello Guys How are you all? Hope you all are fine. Today We are going to learn How to add Border Radius to Container in Flutter?

How to make a blur Background Image effect in Flutter using BackdropFilter ? BackdropFilter Widget is used to give amazing ImageFilter effects on Images. it can also use full to use blur background. Just use BackdropFilter to any image child and give it to filter as ImageFilter effect to it. So without Wasting yolur time lets start this article.

How to make a blur Background Image effect in Flutter using BackdropFilter.
How to make a blur Background Image effect in Flutter using BackdropFilter.
First of All Import material.dart in your main.dart file.
import 'package:flutter/material.dart';
Then, Create void main and Define MyApp in your runApp.

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

Now, Create a class named MyApp extends with a Stateless widget. This is our main View class. and define

class MyApp extends StatelessWidget {

}

Then, After make Scaffold in MyApp Widget. Scaffold is Base of every flutter apps, Scaffold provide appbar, background color, drawer, body, bottomsheet, etc.

We need center widget in our body so add Center widget in body.

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Blur Image in Flutter - Fluttercorner'),
        ),
        body: Center(),
      ),
    );
  }
}

Read Also How to set Background Image to Scaffold in Flutter

Then after we would make Container in Center widget with BoxDecoration and we are going to use DecorationImage in boxDecoration.

decoration: BoxDecoration(
    image: DecorationImage(
       image: NetworkImage(
             "https://images.pexels.com/photos/707915/pexels-photo-707915.jpeg"),
            fit: BoxFit.cover),
 ),

We are using a Network image as our background.
After That, use BackdropFilter as a child in our main Container.
BackdropFilter has Filter Property give it ImageFilter with blur effect.

            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
            )

Boom, now your image has blur effect applied.
Here is My main.dart full source code.

How to make a blur Background Image effect in Flutter using BackdropFilter.