Find The Latest Tech Insights, News and Updates to Read

Live Face Filters in Flutter Using the Camera Plugin

Written by Kshitiz Sharma | Feb 23, 2024 10:17:57 AM

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.

Prerequisites:

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 (https://flutter.dev/docs/get-started/install).

Step 1: Add Dependencies:

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

dependencies:

  flutter:

    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="android.hardware.camera" />

<uses-feature android:name="android.hardware.camera.autofocus" />


<!-- Info.plist -->

<key>NSCameraUsageDescription</key>

<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 {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: CameraScreen(),

    );

  }

}


class CameraScreen extends StatefulWidget {

  @override

  _CameraScreenState createState() => _CameraScreenState();

}


class _CameraScreenState extends State<CameraScreen> {

  late CameraController _controller;

  late List<CameraDescription> _cameras;

  bool _isFaceDetected = false;


  @override

  void initState() {

    super.initState();

    _initializeCamera();

  }


  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) {

        return;

      }


      // Convert CameraImage to Image

      img.Image convertedImage = img.Image.fromBytes(

        image.planes[0].bytesPerRow,

        image.height,

        image.planes[0].bytes,

        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;

        });

      }

    });

  }


  @override

  Widget build(BuildContext context) {

    if (!_controller.value.isInitialized) {

      return Container();

    }


    return Scaffold(

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

      body: Stack(

        children: [

          CameraPreview(_controller),

          if (_isFaceDetected)

            Center(

              child: Text(

                'Face Detected!',

                style: TextStyle(fontSize: 24, color: Colors.green),

              ),

            ),

        ],

      ),

    );

  }


  @override

  void dispose() {

    _controller.dispose();

    super.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.