Привет, это Катя, Flutter Dev Friflex 👋

Сегодня расскажу про распознавание лиц на Flutter. Это важный инструмент в современных мобильных приложениях: от разблокировки смартфона по лицу до автоматического заполнения данных по фото.

Используя Flutter, мы можем достаточно просто реализовать распознавание лиц, текста или звука, при этом кроссплатформенно. Сегодня я расскажу, как добавить распознавание лиц в свое приложение на Flutter с помощью Google ML Kit.

Зачем нужно распознавание лиц?
✔️Безопасность — контроль доступа по лицу
✔️Идентификация — определение пользователя среди базы данных
✔️Интерактивные приложения — фильтры, маски и другие AR-фичи
✔️Автоматизация — например, распознавание посетителей в системе учета

Что нам понадобится
Для примера будем использовать пакет:
▪️google_mlkit_face_detection — для обнаружения лиц на изображениях
▪️image_picker — для выбора фото из галереи или камеры

Добавим в pubspec.yaml:

Yaml
dependencies:
  google_mlkit_face_detection: ^0.13.1
  image_picker: ^1.1.2

Настройка и инициализация

1️⃣ Импортируем пакеты:

import 'package:google_mlkit_face_detection/google_mlkit_face_detection.dart';
import 'package:image_picker/image_picker.dart';

2️⃣ Создаем переменные:

late ImagePicker _picker;
late FaceDetector _faceDetector;
dynamic _image;
Size? _imageSize;
List<Face> _faces = [];

3️⃣ Инициализируем в initState:

@override
void initState() {
  super.initState();
  _picker = ImagePicker();
  _faceDetector = FaceDetector(
    options: FaceDetectorOptions(),
  );
}

4️⃣Закрываем детектор в dispose:

@override
void dispose() {
  _faceDetector.close();
  super.dispose();
}

Логика распознавания
▫️Метод для получения и обработки изображения:

Future<void> _getAndScanImage({final bool? isFromCamera}) async {
  // Очищаем данные
  setState(() {
    _image = null;
    _faces = [];
    _imageSize = null;
  });

  // Получаем изображение
  final imageXFile = await _picker.pickImage(
    source: isFromCamera != null && isFromCamera
        ? ImageSource.camera
        : ImageSource.gallery,
  );

  // Обрабатываем
  if (imageXFile != null) {
    final inputImage = InputImage.fromFilePath(imageXFile.path);
    final facesList = await _faceDetector.processImage(inputImage);
    final imageAsBytes = await imageXFile.readAsBytes();
    final imageDecoded = await decodeImageFromList(imageAsBytes);

    setState(() {
      _faces = facesList;
      _image = imageDecoded;
      _imageSize = Size(
        imageDecoded.width.toDouble(),
        imageDecoded.height.toDouble(),
      );
    });
  }
}

▫️Отображение результата

Expanded(
  child: FittedBox(
    child: SizedBox(
      width: _imageSize!.width,
      height: _imageSize!.height,
      child: CustomPaint(
        painter: FacePainter(
          faceList: _faces,
          imageFile: _image,
        ),
      ),
    ),
  ),
)

Здесь FacePainter — это кастомный класс, который рисует рамки вокруг найденных лиц. Про CustomPainter рассказывала в этом посте.

Как видите, добавить распознавание лиц на Flutter можно буквально в несколько шагов. ML Kit обрабатывает изображение прямо на устройстве, без отправки данных на сервер, что повышает безопасность и скорость работы.