Backdrop Filter Widget In Flutter
Sometimes you need to apply a blurry impact on your application. How might you make such an impact in case you’re utilizing Flutter?. A widget called BackdropFilter is appropriate for that reason. BackdropFilter is a widget that applies a filter to the current painted substance and afterward paints its child widget. Flutter will apply the filter to all spaces inside its parent widget’s clip. That implies if there’s no clip, the filter will be applied to the whole screen.
In this blog, we will explore the Backdrop Filter Widget In Flutter. We will see how to implement a demo program of the backdrop filter widget and show you how to use that widget for creating a blur effect, in your flutter applications.
BackdropFilter class – widgets library – Dart API
A widget that applies a filter to the existing painted content and then paints the child. The filter will be applied to all…api. flutter.dev
Table Of Contents::
Backdrop Filter Widget:
Flutter Backdrop Filter Widget is utilizing to making blurring impacts on pictures, Containers, and every one of the widgets. Backdrop Filter widget is utilized with a mix of ImageFilter class. It applies a filter on the current widget and makes the blur impact underneath the current widget. As far as anyone knows we have an image widget so we put the image widget first at that point put the Backdrop Filter widget as its child.
For more info on Backdrop Filter Widget ,Watch this video By Flutter :
Below demo video shows how to create a blur effect in a flutter. It shows how the blur effect will work using the BackdropFilter widget in your flutter applications. It shows three buttons on the center screen. When the user taps on these buttons, it will show the blur effect. All three buttons different working blur effects. It will be shown on your device.
Demo Module :
Properties:
The list of properties of backdrop filter you can pass to the constructor.
Key key: The widget key, used to control if it should be replaced.ImageFilter filter*: The image filter to apply to the existing painted content before painting the child.Widget child: The widget below this widget in the tree.
Implementation:
Step 1: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/
Step 2: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called home_page_screen.dart inside the lib folder.
We will make three buttons on this home page screen, and each button will show Backdrop Filter, and we will show the deeply below detail. When we run the application, we ought to get the screen’s output like the underneath screen capture.
We will deeply define all buttons
Image Blur:
First, we will import it from dart:ui.
import 'dart:ui';
We will make a blur impact that will be applied to the whole space of the parent widget. As BackdropFilter applies the filter to the current painted substance, for the most part, we need to utilize the Stack widget for the execution. The widget where the filter will be applied should be set before the filter.
Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset("assets/devs.jpg",fit: BoxFit.contain,),
Positioned.fill(
child: Center(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Container(
color: Colors.black.withOpacity(0.2),
),
),
),
),
],
),
Since the filter should cover the whole space of its parent, we need to wrap the BackdropFilter widget as the child of Positioned.fill. You are needed to pass an ImageFilter. For this situation, the most appropriate filter can be made utilizing ImageFilter.blur. sigmaX and sigmaY control the deviation standard dependent on the filter on the x-axis and y-axis individually. Both have a default estimation of 0, which implies no impact is applied. To apply the filter on the x-axis, change the estimation of sigmaX to a positive number. For the y-axis, utilize the sigmaY property. The child of BackdropFilter can be a Container whose shading opacity is under 1, with 0 is a typical worth. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Text Blur:
This Blur example is how to make the filter applied to a specific space of the picture. Rather than Positioned. fill, utilize the default constructor of the Positioned widget by which you can set the separation from the top, left, bottom, and right. In any case, that is adequately not. As I’ve composed above, Flutter will apply the filter to all spaces inside its parent widget’s clip. Accordingly, to apply the channel on a specific territory, you need to wrap them BackdropFilter as the child of any Clip widget, like ClipRect, ClipRRect, ClipOval, ClipPath, or CustomClipper.
Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset("assets/devs.jpg",fit: BoxFit.contain,),
Positioned(
top: 250,
left: 0,
right: 0,
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Container(
padding: EdgeInsets.all(24),
color: Colors.white.withOpacity(0.5),
child: Text(
"Flutter Dev's",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
),
),
],
),
We will add text on a container with the color opacity and the border-radius will be circular due to ClipRRect(). When we run the application, we ought to get the screen’s output like the underneath screen capture.
Image & Text Blur:
In this blur effect, all things will be the same. We will add Stack(), inside we will add a Positioned widget with top, left, and right. We will apply BackdropFilter() and its child property we will add a container with the same text and color with opacity. We will remove ClipRRect. All widgets will be blurred.
Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset("assets/devs.jpg",fit: BoxFit.contain,),
Positioned(
top: 250,
left: 0,
right: 0,
child: Center(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Container(
padding: EdgeInsets.all(24),
color: Colors.white.withOpacity(0.5),
child: Text(
"Flutter Dev's",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
),
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_backdrop_filter_widget/image_blur.dart';
import 'package:flutter_backdrop_filter_widget/image_text_blur.dart';
import 'package:flutter_backdrop_filter_widget/text_blur.dart';
class HomePageScreen extends StatefulWidget {
@override
_HomePageScreenState createState() => _HomePageScreenState();
}
class _HomePageScreenState extends State<HomePageScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffFFFFFF),
appBar: AppBar(
title: Text("Flutter BackdropFilter Widget Demo"),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
RaisedButton(
child: Text('Image Blur',style: TextStyle(color: Colors.black),),
color: Colors.cyan[100],
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => ImageBlur()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
RaisedButton(
child: Text('Text Blur',style: TextStyle(color: Colors.black),),
color: Colors.cyan[100],
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => TextBlur()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
RaisedButton(
child: Text('Image & Text Blur',style: TextStyle(color: Colors.black),),
color: Colors.cyan[100],
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => ImageTextBlur()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
],
),
)
), //center
);
}
}
Conclusion:
In the article, I have explained the basic structure of the Backdrop Filter Widget in a flutter; you can modify this code according to your choice. This was a small introduction to Backdrop Filter Widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Backdrop Filter Widget in your flutter projects. We will show you what the Backdrop Filter Widget is?, some properties using in Backdrop Filter, and make a demo program for working Backdrop Filter Widget and show you how to use that widget for creating a blur effect using the BackdropFilter widget in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Backdrop Filter Widget Demo:
flutter-devs/flutter_backdrop_filter_widget_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
