ImageFiltered Widget In Flutter
Flutter widgets are simply bits of your UI. Truth be told, everything in the UI is a widget. Indeed, even the application itself is a widget!. There are significantly more widgets than simply structural elements like buttons, text, and pictures. For instance, padding is a widget. Layout columns are widgets. Styles are widgets. Indeed, even gesture detectors are widgets.
The Widget, as such, is straightforward, gives a Child property and a Filter property. Playing with this Filter property makes great impacts native to Flutter and doesn’t need importing Edited Pictures(Even however it may appear to be simple).
In this article, we explore the ImageFiltered Widget In Flutter. We will implement a demo program of the image filtered widget and use it in our Flutter application.
Table Of Contents::
ImageFiltered Widget:
Flutter provides an ImageFiltered, a low-level class that takes pixels and rearranges them. It applies an ImageFilter to its child. A filter operation to apply to a raster image.
ImageFiltered will blur the images, text, and anything will be blurry. It also works on any matrix for transformation like scaling, translating, skewing, rotating, etc.
For more info on ImageFiltered Widget,Watch this video:
Code Implement:
Create a new dart file called home_page_screen.dart inside the lib folder.
We will make four buttons on this home page screen, and each button will show ImageFiltered, and we will show the deeply below detail.
Blur Image:
First, we will import it from dart:ui.
import 'dart:ui';
Then we will add an ImageFiltered.blur(), we will add sigmaX, sigmaY for blurring the image. Users can provide a greater amount of blurring in X and Y directions for increasing the blurring of the image. Its child, we will add an image or widget() for blurring.
Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ImageFiltered(
imageFilter: ImageFilter.blur( sigmaY: 4,sigmaX: 4),
child: Image.asset("assets/devs.jpg",)
),
],
),
),
)
When we run the application, we ought to get the screen’s output like the underneath screen capture.
ImageFilter Matrix:
Using a matrix transformation is a little more complicated if you are a genius. You can directly provide the matrix as a float64 list.
Container(
child: Center(
child: Column(
//mainAxisAlignment: MainAxisAlignment.center,
children: [
ImageFiltered(
imageFilter: ImageFilter.matrix(
Float64List.fromList([
1,1,0,0,
0,1,1,0,
1,1,0,1,
1,1,0,1
]),
),
child: Image.asset("assets/devs.jpg",scale: 3.5,)
),
],
),
),
)
We will wrap the image you want to filter with ImageFiltered and provides the filter so that the image can be filtered. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Matrix4 Rotation:
Most users will opt to use the matrix4 class from the vector path instead of the float64 list.
Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ImageFiltered(
imageFilter: ImageFilter.matrix(
Matrix4.rotationZ(0.15).storage,
),
child: Image.asset("assets/devs.jpg",scale:3.5)
),
],
),
),
)
In ImageFiltered, we will add Matrix4.rotaionZ() dot storage and provide a rotation in Z directions. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Blur Full Screen:
It’s good to keep in mind that everything in flutter is a widget. Therefore, you can filter anything, not just images.
Container(
child:ImageFiltered(
imageFilter: ImageFilter.blur( sigmaY: 3,sigmaX: 3),
child: FullScreen()
) ,
);
We will wrap the widget/class you want to filter with ImageFiltered and provides the filter that anything can be filtered. We will add sigmaX, sigmaY for blurring the screen. Users can provide an amount of blurring in X and Y directions.
Create a FullScreen() class on blur_full_screen.dart inside the lib folder.
return Scaffold(
backgroundColor: Color(0xffFFFFFF),
appBar: AppBar(
backgroundColor: Colors.black,
title: Text("ImageFiltered Demo"),
centerTitle: true,
),
body: Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/devs.jpg",)
],
),
),
)
);
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_imagefiltered_demo/blur_full_screen.dart';
import 'package:flutter_imagefiltered_demo/blur_image.dart';
import 'package:flutter_imagefiltered_demo/imagefilter_matrix.dart';
import 'package:flutter_imagefiltered_demo/matrix4_rotation.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(
backgroundColor: Colors.black,
title: Text('ImageFiltered 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('Blur Image',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent[100],
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => BlurImage()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
RaisedButton(
child: Text('ImageFilter Matrix',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent[100],
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => ImageFilterMatrix()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
RaisedButton(
child: Text('Matrix4 Rotation',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent[100],
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => Matrix4Rotation()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
RaisedButton(
child: Text('Blur Full Screen',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent[100],
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => BlurFullScreen()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
],
),
)
), //center
);
}
}
Conclusion:
In the article, I have explained the basic structure of the ImageFiltered Widget in a flutter; you can modify this code according to your choice. This was a small introduction to ImageFiltered 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 ImageFiltered Widget in your flutter projects. We will show you what the ImageFiltered widget is?, some properties using in ImageFiltered, and make a demo program for working ImageFiltered 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 ImageFiltered Widget Demo:
flutter-devs/flutter_imagefiltered_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.
