How to get blur background Image in Flutter
Last updated Nov 30, 2021A 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:
 |
Conculsion: In this way, we have learned how we can add a blur background image to our Flutter Application.
|
Article Contributed By :
|
|
|
|
|
1456 Views |
|