Implementing text, image and face recognition in Flutter

Arpandev

3 min read

·

Oct 21, 2026

--

1

Listen

Share

Hi, it’s Arpandev here again with a trending topic in the market related to flutter & Mobile Engineering. Let’s start with the recipe.

Press enter or click to view image in full size

In this recipe , you will start taking a picture with your device, then you will use Google Google ML Kit to recognize text, process images and detect faces.

1. We will start with adding a image_picker plugin in flutter app
2. Next import the three ML Kit plugins we will will use for this project
   google_mlkit_text_recognition, google_mlkit_image_labeling, google_mlkit_face_detection

So the flow of the executions:
a) User selects a picture from gallery or camera
b)You convert the image into an ML Kit input image
c) ML kit performs it’s tasks on image & return a result
d) you show the result to the user

Now in this recipe , we will start with ML by incorporating ML kit’s text recognizer. we will create a feature where you take picture and if there is some recognizable text in it, ML kit will turn it into one or more strings. Then we’ll label the image and finally we’ll check whether there are faces in the picture

HOW TO DO IT?

in the following steps, you will update the screen that you created in the previous recipe, adding three buttons for text recognition, image labeling & face detection:
1. At the top of the ml_kit_screen.dart file, import the MLKit packages that we’ll use in this recipe:

2. In the _MLKitScreenState class, create a new async method called textFromImage that takes an image file and returns a Future:

 Future<String> textFromImage(File image) async {}

3.In the textFromImage method, process the image with the ML Kit TextRecognizer and return the retrieved text:

final textRecognizer = TextRecognizer();
final InputImage inputImage = InputImage.fromFile(image);
final RecognizedText recognizedText = await textRecognizer.processImage(inputImage,);
return recognizedText.text;

4.Add a new async method and call it labelImage. Again, the method takes a File as a parameter and returns a Future<String>:

Future<String> labelImage(File image) async {}

5. At the top of the labelImage method, declare a String for the result and an InputImage that parses the image passed as a parameter:

String result = '';
final InputImage inputImage = InputImage.fromFile(image);

6. Declare an ImageLabeler object with the default options:

final imageLabeler = ImageLabeler(options: ImageLabelerOptions());

7. Call the processImage method to retrieve the list of labels recognized by the image labeler:

final List<ImageLabel> labels = await imageLabeler.processImage(inputImage);

8. Loop through the labels, and for each label, add to the results string the index, the label, and the confidence of the label, then return the result:

for (ImageLabel label in labels) {
  final String text = label.label;
  final int index = label.index;
  final double confidence = label.confidence;
   result += '$index: $text - ${${(confidence * 100).toStringAsFixed(1)}%\n';
}
return result;

9. Add a new async method called detectFace. As with the previous processing methods, this takes a File as a parameter and returns a Future of type String:

 Future<String> detectFace(File image) async {}

10. At the top of the detectFace() method, declare a String for the result and an InputImage that takes the file passed as an argument:

String result = '';
final InputImage inputImage = InputImage.fromFile(image);

11. Create a FaceDetector instance, with the default options:

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

12. Call the faceDetector.processImage method to retrieve a list of Face objects:

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

13. Set the result so that it tells users the number of faces in the picture, and return the result:

result = 'There are ${faces.length} face(s) in your picture.';
return result;

14. In the build method, before the Text widget containing the result String, add three buttons for each of the methods we created:

ElevatedButton(
  onPressed: () async {
    if (image == null) return;
    final text = await textFromImage(image!);
    if (!mounted) return;
    setState(() {
      result = text;
    });
  },
  child: const Text('Text Recognition'),
),
const SizedBox(height: 16),
ElevatedButton(
  onPressed: () async {
    if (image == null) return;
    final labels = await labelImage(image!);
    if (!mounted) return;
    setState(() {
      result = labels;
    });
  },
  child: const Text('Image Labeling'),
),
const SizedBox(height: 16),
ElevatedButton(
  onPressed: () async {
    if (image == null) return;
    final faces = await detectFace(image!);
    if (!mounted) return;
    setState(() {
      result = faces;
    });
  },
  child: const Text('Face Detection'),
),
const SizedBox(height: 16),

15. Run the app, and after selecting an image, try the three buttons and check the result string
Next part coming soon!