In our previous section we have discussed how we’re going to build different types of tiny flutter apps. In our first endeavour, we are going to filter images in flutter.
Let’s see how it works first.
An image is worth a thousand words. Therefore, it will give us a clear picture. It will explain what we’re going to do.
In the above screenshot, we see in the background the image is clear, and distinct.
On the foreground there is a text message.
However, we want to soften this image so that the image fades and we can read the text easily.
To do that, we need widgets that filter images in flutter.
As a result, the image softens and the text becomes distinct.
How do you filter images in Flutter
To give an image a fading effect, we need different types of widgets.
Although, finally, we want a BackDropFilter widget, yet before that we have to do other jobs.
The filter property of the BackDropFilter widget wants a ImageFilter constructor.
We must learn them separately to master the whole trick.
Firstly, the image property of the BoxDecoration widget expects another widget. And that is DecorationImage.
Secondly, the DecorationImage has another property called image which expects an ImageProvider object.
Usually, the image class has many constructors. But each has its own rules and regulations.
As a result, we cannot use any one of them to show images from the internet.
Let us see the code first, after that we will discuss the code.
import 'dart:ui';
import 'package:flutter/material.dart';
class ImageFilterHomePage extends StatelessWidget {
const ImageFilterHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://cdn.pixabay.com/photo/2018/04/23/15/35/coins-3344603_960_720.png'),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
child: const Center(
child: Text(
'Earn as you Learn',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
);
}
}There are many use cases, where we will use this trick. The first section of the tiny flutter apps deals with filter images in flutter. However, we have not finished yet. On the contrary, we will delve deep into this topic and learn more about different tricks in the coming sections.
The problems we face to filter images in flutter
Firstly, we need a Container widget to place the image which we are going to filter. Right?
Secondly, we have to place a text message on the image.
Therefore the whole process starts with the BoxDecoration widget.
Now the image property of the BoxDecoration widget has certain rules that we need to maintain when we want to show images from the internet.
What is the rule?
We cannot use any Image class constructors, such as Image.network.
Try to use this Image class constructor and see the error.
As a result, we can use the NetworkImage() class.
What is the NetworkImage() class? How does it work?
The NetworkImage() class fetches the URL we pass through the class constructor.
Moreover, it does not clash with the DecorationImage.
When we filter images in flutter we will face this problem first. But we can solve any problem. Just Google it. Someone must have faced the same problem and shared it for the flutter community.
Finally, if you want to clone this tiny step of building tiny flutter apps series, please visit this branch of GitHub repository.
Leave a Reply