Flutter – Blurred Decoration Image
Last Updated :
14 Dec, 2022
In this article, we will implement how to Blur an image in flutter. A sample image is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter. Or you can simply run this command in your project directory.
flutter create projectname
This command creates the Flutter project for you, Now you can run it.
Step 2: Add the material package that gives us the important methods and then call the runApp method in the main function that will call our application.
import 'package:flutter/material.dart';
void main() {
runApp(RunMyApp());
}
Step 3: Now we have to make a stateless widget RunMyApp Because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more.
class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(home:);
}
}
Step 4: Give the home property and there can be a scaffold widget with the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. Body contains the Container and has height , width, and decoration parameters, Again we can decorate the container using the BoxDecoration, Box decoration have the image of the asset and fit the cover.
Container(
height: double.maxFinite,
width: double.maxFinite,
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage("assets/img.png"),
fit: BoxFit.cover,
),
),
child:
Step 5: Now we can use the filter to blur this image.
child: ClipRRect(
// make sure we apply clip it properly
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
alignment: Alignment.center,
color: Colors.grey.withOpacity(0.1),
child: Text(
"GFG COURSES",
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
),
),
),
Final Code:
Dart
import 'dart:ui' ;
import 'package:flutter/material.dart' ;
void main() {
runApp(RunMyApp());
}
class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
theme: ThemeData(primarySwatch: Colors.green),
home: Scaffold(
appBar: AppBar(
title: Text( 'Blur Image' ),
),
body: Container(
height: double .maxFinite,
width: double .maxFinite,
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage( "assets/img.png" ),
fit: BoxFit.cover,
),
),
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
alignment: Alignment.center,
color: Colors.grey.withOpacity(0.1),
child: Text(
"GFG COURSES" ,
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
),
),
),
),
),
);
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...