BackdropFilter Widget – Flutter Widget Guide By Flutter Agency
In this article, we will look at some good Image Effects that are possible on Flutter using BackdropFilter Widget. The Widget as such is really straightforward, provides a Child attribute and a Filter attribute. Playing with this Filter attribute creates really good effects native to Flutter and doesn’t require importing Edited Pictures.
What is BackdropFilter Widget?
BackdropFilter Widget is used to create good Image Effects that are possible on Flutter using BackdropFilter Widget
Default Constructor for it will look like below:
BackDropFilterWidget({
Key key,
@required ImageFilter filter,
Widget child,
});
In the Above constructor, all fields marked with @required must not be empty.
Properties:
The 2 important attributes of the BackdropFilter Includes as listed below :
- child – As the name suggests, it can be a Container Widget or any constraints that need to be applied to the BackdropFilter Widget. This cannot be an Image Widget as it cannot apply Filters to itself.
child: Container(decoration:
BoxDecoration(
color: Colors.grey.shade100.withOpacity(0.2),
)The child can take in any Container Widget or Box Widgets to provide that overlay effect on the elements below it.
- filter: Filter applies the Required ImageFilter class. It can either be Matrix/Blur and it applies these Filters to the Widgets below it.
filter: ImageFilter.blur(
sigmaX: 5,
sigmaY: 6,
),The filter attribute can take only the ImageFilter class as its value. This value can be either a blur or a Matrix.
To make use of the BackdropFilter, use the Class given below,
BackdropFilter()
The important part of using the BackdropFilter Widget is that the Child should be stacked below this Widget. The filter is applied like it is applied to a Container Widget and it creates the Image Effects that are required. We will look at examples of these two scenarios below.
How to use BackdropFilter Widget in Flutter?
The following code snippet tells us how to implement BackdropFilter in Flutter.
Stack(
children: <Widget>[
ConstrainedBox(
child:Image.asset("assets/nature.jpg") ,
constraints: BoxConstraints.expand(),
),
Container(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 6),
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade100.withOpacity(0.2),
)
),
),
),
],
);
Which will give us output like below :
BackdropFilter Widget
Conclusion:
In this article, we have been through What is BackdropFilter in Flutter along with how to implement it in a Flutter.
Do let us know if you have any suggestions/comments.
Do Contact Us !!!
FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.
FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.
