Step 2 — Fetch and Process the Image

Here, we first need to fetch the image from either the camera or the device gallery using the image_picker plugin.

final imageFile = await ImagePicker.pickImage(source:ImageSource.gallery);

seState((){

isLoading = true;

});

Then let’s convert this image into bytes so it can be understood by the ML model and the custom painter as well.

final data = await file.readAsBytes();

await decodeImageFromList(data).then(

(value) => setState(() {

_image = value;

isLoading = false;

}),

);

Step 3 — Detect the Faces

We will now create an instance of the Face Detector and task it to process the image to find any possible faces.

final faceDetector = FirebaseVision.instance.faceDetector();

List<Face> faces = await faceDetector.processImage(image);

Step 4 — CustomPainter

The face detector will return a list of Face class which contains the Rect coordinates. The Painter will then use these coordinates to draw a rectangular box around the faces using these coordinates. Below is the code for our CustomPainter.

Step 5 — Code the UI

We can now use the custom painter inside our widget tree like so:

Step 6— Enjoy

Now, let’s run the app and hope that we had everything right.

Yaaayyy!!! We’ve got our face detection app with some few lines of code thanks to the Flutter framework and Firebase.

Checkout out the source code of this project: