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: Conculsion: In this way, we have learned how we can add a blur background image to our Flutter Application.
|
Article Contributed By :
|
|
|
|
|
923 Views |
|