Google ML Kit + Flutter: Part 2(Face Detection)

Welcome back to the second part of our blog series on integrating Google ML Kit with Flutter! In our previous blog post, we delved into the basics of using ML Kit for barcode scanner within a Flutter app. In this blog, we’re shifting our focus to a more visually intriguing topic — Face Detection. The ability to detect faces in images opens up a multitude of possibilities for creative and practical applications within your Flutter projects. So, without further delay, let’s dive into the exciting world of Face Detection using Google ML Kit and Flutter!

Prerequisites: Before we start, make sure you have Flutter and Dart installed on your system. If you haven’t gone through Part 1 of this series, it might be helpful to review it for a general understanding of integrating Google ML Kit into a Flutter app.

I’m using Google ML Kit which consists of all the features library inside it. But you can select individual libraries according to your need.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  google_ml_kit: ^0.13.0
  image_picker: ^0.8.6

Step 2: Import

import 'package:google_ml_kit/google_ml_kit.dart';
import 'package:image_labeling/screens/painter/face_painter.dart';
import 'package:image_picker/image_picker.dart';

Step 3: Install the dependencies

Run the below command in the root directory of your app to install dependency.

flutter pub get

Step 4: Initialize FaceDetector Instance

There are two ways to create instances of FaceDetector.

a) First way to create an instance of faceDetector is by using faceDetector() method of GoogleMlKit.vision

final faceDetector = GoogleMlKit.vision.faceDetector(FaceDetectorOptions());

b) Second way to create an instance is to directly use FaceDetector() with the required options.

final faceDetector = FaceDetector(options: FaceDetectorOptions());

Step 5: Picking Image & Processing

Whenever the user picks or captures any image then we will first convert the file picked into InputImage and then will process that image using the processImage() method of faceDetector instance. This instance will return the list of faces.

try {
       var file = await ImagePicker.platform.pickImage(source: ImageSource.camera);
       final InputImage inputImage = InputImage.fromFile(File(file!.path));
       final List<Face> faces = await faceDetector.processImage(inputImage);
       setState(() {
          _imageFile = File(file.path);
          _faces = faces;
          _loadImage(File(file.path));
       });
    } catch (e) {
       log(e.toString());
    }

Also, _loadImage() function loads an image file, decodes it, and updates the app’s state to display the image in the user interface.

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

Step 6: Paint the Face

After identifying the faces from the image picked. We have to draw rectangles around the identified faces so this Flutter class, FacePainter, uses the CustomPainter base class to draw rectangles around detected faces on an image. It takes an image and a list of face objects as inputs. The paint method paints the image on the canvas and draws red rectangles around the detected faces using provided bounding box data. The shouldRepaint method determines if repainting is needed based on changes in the image or face data.

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 = 3.0
      ..color = Colors.red;

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

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

Output:

Face Detection

Full Souce Code

Here is the source code that you can clone and use for your application.
GitHub Link: FaceDetection

Please Follow 💙 and clap 👏, if you find the article useful. And get notified of my upcoming articles.

Follow me on Twitter: @imsnehalsingh and Github: Snehal Singh to hear about my projects.