Creating Live Face Filters in Flutter Using the Camera Plugin

Creating Live Face Filters in Flutter Using the Camera Plugin

Quick Summary: Dive into the world of augmented reality in Flutter with live face filters using the Camera plugin. This article provides a step-by-step guide on implementing real-time face filters, enabling captivating and interactive experiences in your Flutter applications.

Flutter is a powerful framework for building cross-platform mobile applications. One interesting use case is implementing live face filters in a Flutter app using the camera plugin. In this tutorial, we'll explore how to integrate the camera plugin and apply live face filters to create a fun and interactive user experience.


Before we begin, make sure you have Flutter installed on your machine. You can check the official Flutter documentation for installation instructions Flutter Installation Guide (

Hire Flutter Developers

Step 1: Add Dependencies:

Open your `pubspec.yaml` file and add the following dependencies:



    sdk: flutter

  camera: ^0.10.25

  image: ^3.0.1

  facial_recognition: ^0.2.0

  permission_handler: ^10.1.0


Run `flutter pub get` to fetch the new dependencies.

Step 2: Request Camera Permissions:

Ensure you have proper permissions to access the camera by adding the following code to your `AndroidManifest.xml` and `Info.plist` files for Android and iOS, respectively.

<!-- AndroidManifest.xml -->

<uses-permission android:name="android.permission.CAMERA" />

<uses-feature android:name="" />

<uses-feature android:name="" />

<!-- Info.plist -->


<string>We need access to your camera to apply live face filters.</string>


Step 3: Implement the Camera Screen:

Create a new Dart file for your camera screen, for example, `camera_screen.dart`. Implement the camera screen with a live preview and face detection using the camera plugin and facial_recognition library.

import 'package:flutter/material.dart';

import 'package:camera/camera.dart';

import 'package:image/image.dart' as img;

import 'package:facial_recognition/facial_recognition.dart';

import 'package:permission_handler/permission_handler.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {


  Widget build(BuildContext context) {

    return MaterialApp(

      home: CameraScreen(),




class CameraScreen extends StatefulWidget {


  _CameraScreenState createState() => _CameraScreenState();


class _CameraScreenState extends State<CameraScreen> {

  late CameraController _controller;

  late List<CameraDescription> _cameras;

  bool _isFaceDetected = false;


  void initState() {




  Future<void> _initializeCamera() async {

    _cameras = await availableCameras();

    _controller = CameraController(_cameras[0], ResolutionPreset.medium);

    await _controller.initialize();

    if (!mounted) return;

    setState(() {});

    _controller.startImageStream((CameraImage image) {

      if (_isFaceDetected) {



      // Convert CameraImage to Image

      img.Image convertedImage = img.Image.fromBytes(




        format: img.Format.luminance,


      // Detect face

      List<Face> faces = FacialRecognition.detectFaces(convertedImage);

      if (faces.isNotEmpty) {

        // Face detected, apply your face filter logic here

        setState(() {

          _isFaceDetected = true;






  Widget build(BuildContext context) {

    if (!_controller.value.isInitialized) {

      return Container();


    return Scaffold(

      appBar: AppBar(title: Text('Live Face Filters')),

      body: Stack(

        children: [


          if (_isFaceDetected)


              child: Text(

                'Face Detected!',

                style: TextStyle(fontSize: 24, color:,








  void dispose() {






This example demonstrates a simple face detection mechanism using the `facial_recognition` library. You can replace the face detection logic with your face filter implementation. Remember to handle errors, such as checking camera availability and permissions, to ensure a smooth user experience. Additionally, explore more advanced face filter options and integrate them into your Flutter app for a captivating user interface.

Hire Flutter developers to elevate your Flutter app design. Unlock the full potential of Flutter layouts with our professional Flutter developers. 

Remote Team

Kshitiz Sharma

Kshitiz Sharma

A mobile app developer on a relentless quest for excellence, fueled by a passion for innovation. I am a dedicated explorer in the world of code, always pushing the limits, and love creating apps that work wonders.