Photo Filters In Flutter

Introduction

In this article, we will learn how to implement photo filter feature in Flutter application. We will implement an example in which we will, first, capture an image using a camera plugin then apply filters on the captured image and show the ultimate output. There are around 33 filters in the plugin. You can download the source code and check it out. So let’s start implementing it.

Output

Plugin Required

camera: ^0.5.4+1

photofilters: ^1.0.5

Steps

Step 1

The first and most basic step is to create a new application in Flutter. If you are a beginner in flutter then you can check my blog Create a first app in Flutter. I have created an app named as “flutter_photo_filter”.

Step 2

Now, we will configure plugins for photo capture and photo filter in pubspec.yaml file.

dependencies:
flutter:
sdk: flutter
camera: ^0.5.4+1
photofilters: ^1.0.5

Step 3

Now, we will implement a logic to capture images using a camera plugin. I have already implemented an app for this one of our previous articles. Take a look at Flutter Camera Overlay. We will start from that app and modify the app to filter the captured image.

Step 4

In the main.dart file, we will implement a method which will navigate to filter page when a user captures the image using a camera. Following is the implementation of that method.

Future openCamera() async {
availableCameras().then((cameras) async {
final imagePath = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CameraPage(cameras),
),
);
setState(() {
_imagePath = imagePath;
});
var imageFile = File(imagePath);
fileName = path.basename(imageFile.path);
var image = imageLib.decodeImage(imageFile.readAsBytesSync());
image = imageLib.copyResize(image, width: 600);
Map imagefile = await Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new PhotoFilterSelector(
title: Text("Photo Filter Example"),
image: image,
filters: presetFiltersList,
filename: fileName,
loader: Center(child: CircularProgressIndicator()),
fit: BoxFit.contain,
),
),
);
if (imagefile != null && imagefile.containsKey('image_filtered')) {
setState(() {
imageFile = imagefile['image_filtered'];
_imagePath = imageFile.path;
});
}
});
}

Hooray…. Run the app and test it on an emulator/simulator or device :)))

Download the full source code which is attached for a full working example. You can also refer to my Git repository.

Conclusion

We have learned how to capture images and apply a filter on it in Flutter application using photo filter plugin.