How to get blur background Image in Flutter

Last updated Nov 30, 2021


 A blurred background or a radial blur in an image can imitate the high-focus look of a shallow depth of field. which will improve the user experience.

Flutter is an open-source UI software development kit created by Google, also Flutter is all about Widget So in today's tutorial we will see how you can create a blur background Image in Flutter.

Let's start

Step 1: Create a new Flutter Application

Step 2: Now add an Image into your assets folder and use it in your application you can cover your full screen with an image with fit: BoxFit.cover property.

for example:

 

This is the image without a blur effect.

Step 3: Now adding a blur can help us to have a better focus on the text as well as the user experience is improved so to add blur wrap your child with a widget called BackdropFilter

BackdropFilter will get us filter property where we can use ImageFilter.blur

BackdropFilter(

          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),

          child: Center(

            child: Text(

              'Travel the world',

              textAlign: TextAlign.center,

              style: GoogleFonts.tradeWinds(fontSize: 55, color: Colors.white),

            ),

          ),

        ),

 

 

Full Source Code to try

import 'package:flutter/material.dart';

import 'package:flutter_blur_image/demo_app.dart';

 

void main() {

  runApp(const MyApp());

}

 

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

 

  @override

  Widget build(BuildContext context) {

    return const MaterialApp(

      debugShowCheckedModeBanner: false,

      home: DemoApp(),

    );

  }

}


 

class DemoApp extends StatelessWidget {

  const DemoApp({Key? key}) : super(key: key);

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Container(

        decoration: const BoxDecoration(

            image: DecorationImage(

                image: AssetImage('assets/images/image.jpg'),

                fit: BoxFit.cover)),

        child: BackdropFilter(

          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),

          child: Center(

            child: Text(

              'Travel the world',

              textAlign: TextAlign.center,

              style: GoogleFonts.tradeWinds(fontSize: 55, color: Colors.white),

            ),

          ),

        ),

      ),

    );

  }

}


 

 

Output:

Video Tutorial

Conculsion: In this way, we have learned how we can add a blur background image to our Flutter Application.

 

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

519 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions