How to Create Face Filters with Flutter 2.0?

In this blog, we will be going step by step on how we can create a flutter app that can add a face filter similar to Snapchat and download it to our gallery.

Requirements:

• Flutter Installed
• VS Code
• Emulator/Real Device

We will be creating an app that can create face filters just like this..

Src: deepar.ai

Getting Started

First of all, let's create a flutter app with the command flutter create filter_app. Jump into main.dart file in the lib folder and remove the starter code like the image below.

Adding Assets

Before diving into the code, I’d suggest you download the images and fonts of your choice in the project. The images I have used can be found here: https://github.com/RivaanRanawat/face_filters_app/tree/master/assets/images. After adding them to the project, it’s important to make Flutter know that these images exist in the project. We can do this by simply going to the pubspec.yaml file and uncommenting the assets code and then mentioning the file location of the images as I have done below. Make sure to the name the images 0,1,2,3 till 7 and with the same extension like jpeg else, it will give logical errors with the future code.

Creating Splash Screen

For this, to make our job easier, we will install a package named splashscreen. Right now, the latest version is ^1.3.5, so can be installed by adding this line in pubspec.yaml file.

splashscreen: ^1.3.5

Then, we will create a file named MySplashScreen, not SplashScreen as the name of the plugin we have installed is SplashScreen as well which can create issues. However, a fix to that is simple enough but let’s go with the MySplashScreen name. Create it as a stateless widget and add the following code.

return SplashScreen(
navigateAfterSeconds: CameraFilterScreen(),
seconds: 3,
title: Text(
"Face Filters",
style: TextStyle(
fontSize: 55,
color: Colors.deepPurpleAccent,
),
),
image: Image.asset("assets/images/icon.png"),
photoSize: 140,
backgroundColor: Colors.white,
loaderColor: Colors.deepPurple,
loadingText: Text(
"by Your Name",
style: TextStyle(color: Colors.deepPurpleAccent, fontSize: 16),
),
);

The following code creates a splash screen with an icon, a subtitle, a loader, and the title. We will stay on this screen for 3 seconds which can be changed using the seconds parameter. After the 3 seconds get over, the navigateAfterSeconds function is run which transitions from the current SplashScreen to the screen we mention. To avoid the compile-time error, we are getting right now, let’s create a stateful widget named CameraFilterScreen.

Getting Started with Camera Deep AR

To add filters in our app, we will be using a flutter plugin named camera_deep_ar. Install it using:

camera_deep_ar: ^0.0.1

If you get any error running the app after installing this dependency, update the line in dependencies in build.gradle in android folder to:

classpath 'com.android.tools.build:gradle:3.5.0'

Now, let’s connect the plugin to the flutter app by signing up on their official developer’s website http://developer.deepar.ai/

Complete the signup process and you’ll land on the dashboard completely empty with a plus sign. Click over there and get started for free. Give a random name to the project, agree to the terms and conditions and click Create Project.

You’ll see a page like this. Click on Add Android App. For, the App Name, go to your project’s pubspec.yaml file and copy the name on the first line and paste it in the App Name.

For App ID, go to your build.gradle in android\app\ , copy the applicationId from there and paste it. Then, click Create App. Also, in build.gradle change minSdkVersion to 19.

After that, you’ll get App Key, copy it. Without that, the app won’t run properly. Let’s get back to coding. Add the following code to your camera_filters_screen.dart file

Here, we create a Material app with a Scaffold and background color of Black which will be covered by the camera. We need to create a Stack that will pile widgets above each other whose children will be CameraDeepAr which is given by camera_deep_ar package. We will discuss the functions in just a bit. Later, we use the Align widget which will align its children to the bottom center. After that, we create a Column with a padding of 20px on all sides which starts from the bottom of the screen. Then, we simply create a button to capture the picture. After that, we have a row of 8 images we had added earlier to switch between the filters. Since it can exceed the screen, we will make it Scrollable using the SingleChildScrollView with the scrollDirection property as Axis.horizontal. We create an avatar view to fit images in it. For that, we use the flutter plugin avatar_view which can be installed using:

avatar_view: ^1.0.0+4

We could have used CircleAvatar instead of this but why not try something new? Then, we simply check if the currentPage is equal to the page we click. And if it is, we enlarge the Image. Since we need to change the page whenever we click the image, we wrap it with GestureDetector and add the onTap Property which will change the currentPage to the new page. Then, we notify flutter about this using setState. The imagePath is defined as ${index.toString()}.jpg as the index is the new page we move to and the name of our images are defined as follows (eg, 1.jpg and 0.jpg)

Now, that we learned about UI, let’s dive into the functions of CameraDeepAr. We have 4 functions that need to be filled in to make sure Android App is running. cameraDeepArCallback, onCameraReady, onImageCaptured and androidLicenceKey. For androidLicenceKey, you just have to paste the license key you got from the developer.deepar.ai website.

onCameraReady is a function that returns a boolean value if the camera is ready or not. We, just store that in _platformVersion variable and notify flutter about it using setState.

cameraDeepArCallback returns a value of CameraDeepArController. We save that in the variable we created cameraDeepArController and call setState.

onImageCaptured returns a String which returns the path of the image where it gets stored.

To make the clicking of photo get saved in gallery, we get back to the TextButton we created with icon of camera. We give the onPressed method as:

if (cameraDeepArController == null) {
return;
}
cameraDeepArController.snapPhoto();

This is to check if the controller isn’t null, if it is, we just return. If not, we take the photo using snapPhoto function.

Conclusion

This is how simple it gets adding filters to your app with flutter and DeepArAI!

I’d like to challenge you to make this app capture a video and adding the filter option as well. You can check out the CameraDeepAr documentation to go ahead with it.

Source Code: https://github.com/RivaanRanawat/face_filters_app/

Contact Me Here:
Instagram: https://www.instagram.com/optimalcoding/

Portfolio Website: https://rivaanranawat.netlify.app/