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

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.

Question: How to make a blur Background Image effect in Flutter using BackdropFilter ?
Answer: How to make a blur Background Image effect in Flutter using BackdropFilter ? BackdropFilter Widget is used to give amazing ImageFilter effects on Images.

  • 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.
import 'dart:ui';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Blur Image in Flutter - Fluttercorner"),
        ),
        body: Center(
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(
                      "https://images.pexels.com/photos/707915/pexels-photo-707915.jpeg"),
                  fit: BoxFit.cover),
            ),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
              child: Container(
                alignment: Alignment.center,
                color: Colors.grey.withOpacity(0.1),
                child: Text(
                  "Blur Background Image in Flutter - Fluttercorner",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 30,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

So Guys That’s It For How to make a blur effect in Flutter using BackdropFilter. Hope you like our tutorial. Comment below Your thoughts and your queries. And Also Comment below your suggestion here.

Also Read How to add Border Radius to Container in Flutter ?

Milan Dhameliya is an Information Technology Engineer. By profession, he is a Full Stack developer with knowledge of multiple back-end platforms (e.g., PHP, Node.js, Python) and frontend Flutter frameworks.

Leave a Comment