Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

Flutter Face Recognition - Face Detection using Firebase ML Kit

Published June 10, 2021

In this flutter programming example we will learn how to implement face detection in flutter application. To work with face detection in flutter we will use Firebase ML Kit. This example application we will detect human faces in an image.

 

Flutter face detection using Firebase ML Kit

 

Application Use Cases

This Firebase ML Kit enables us to detect face in an image file. This MK Kit algorithm will returns rectangular bounding boxes that we can then plot on the detected face.

So let's get started face detection application

 

 

Step 1: Create a flutter application in Android or any other IDE

Step 2: To work with Firebase ML Kit we need to connect our flutter application with firebase, read  Firebase Integrate in flutter application which we covered in our previous article.

 

Step 3: Add ML kit dependencies in pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  firebase_ml_vision: ^0.9.10
  image_picker: ^0.6.7+17
  firebase_core: ^0.5.3

 

Step 4: Initialize firebase instance

To initiate Firebase Instance we need to add ML Kit meta info in Android manifest file

<meta-data
    android:name="com.google.mlkit.vision.DEPENDENCIES"
    android:value="face" />

 

Step 5:  Write for code to face detection. Here we are picking the image from galerry and applying the face recognition algorithm on the selected image. The ML Kit algorithm will returns the rectangular box and plots in the detected face area on the image.

import 'package:flutter/material.dart';
import 'package:firebase_ml_vision/firebase_ml_vision.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
import 'dart:ui' as ui;

void main() => runApp(
  MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ),
);

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  File _imageFile;
  List<Face> _faces;
  bool isLoading = false;
  ui.Image _image;
  final picker = ImagePicker();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: _getImage,
          child: Icon(Icons.add_a_photo),
        ),
        body: isLoading
            ? Center(child: CircularProgressIndicator())
            : (_imageFile == null)
            ? Center(child: Text('no image selected'))
            : Center(
            child: FittedBox(
              child: SizedBox(
                width: _image.width.toDouble(),
                height: _image.height.toDouble(),
                child: CustomPaint(
                  painter: FacePainter(_image, _faces),
                ),
              ),
            )));
  }

  _getImage() async {
    final imageFile = await picker.getImage(source: ImageSource.gallery);
    setState(() {
      isLoading = true;
    });

    final image = FirebaseVisionImage.fromFile(File(imageFile.path));
    final faceDetector = FirebaseVision.instance.faceDetector();
    List<Face> faces = await faceDetector.processImage(image);

    if (mounted) {
      setState(() {
        _imageFile = File(imageFile.path);
        _faces = faces;
        _loadImage(File(imageFile.path));
      });
    }
  }

  _loadImage(File file) async {
    final data = await file.readAsBytes();
    await decodeImageFromList(data).then((value) => setState(() {
      _image = value;
      isLoading = false;
    }));
  }
}

class FacePainter extends CustomPainter {
  final ui.Image image;
  final List<Face> faces;
  final List<Rect> rects = [];

  FacePainter(this.image, this.faces) {
    for (var i = 0; i < faces.length; i++) {
      rects.add(faces[i].boundingBox);
    }
  }

  @override
  void paint(ui.Canvas canvas, ui.Size size) {
    final Paint paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2.0
      ..color = Colors.yellow;

    canvas.drawImage(image, Offset.zero, Paint());
    for (var i = 0; i < faces.length; i++) {
      canvas.drawRect(rects[i], paint);
    }
  }

  @override
  bool shouldRepaint(FacePainter old) {
    return image != old.image || faces != old.faces;
  }
}

 

Step 6: Run the application

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

771 Views

Flutter Questions

Android Questions

© 2021 RRTutors . All Rights Reserved.