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

В прошлом посте мы разбирали распознавание лиц на Flutter, а сегодня расскажу про распознавание текста.

Распознавание текста (OCR) — это одна из самых популярных функций в мобильных приложениях:
▪️сканирование документов
▪️автоматическое заполнение форм по фото
▪️извлечение текста из визиток, чеков, квитанций
▪️перевод текста прямо с картинки
С помощью Flutter и Google ML Kit добавить OCR в приложение можно всего за несколько шагов.

Зачем нужно распознавание текста?
✔️Автоматизация — больше не нужно вручную переписывать текст
✔️Удобство — пользователь делает фото, а приложение достаёт оттуда данные
✔️Инклюзивность — для слабовидящих можно превращать картинку с текстом в озвученный контент
✔️Применимость в бизнесе — распознавание документов, счетов, ценников

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

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

Yaml
dependencies:
  google_mlkit_text_recognition: ^0.13.1
  image_picker: ^1.1.2

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

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

import 'dart:io';
import 'package:google_mlkit_text_recognition/google_mlkit_text_recognition.dart';
import 'package:image_picker/image_picker.dart';

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

late TextRecognizer _recognizer;
File? _imageFile;
String _scanResults = '';

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

@override
void initState() {
  super.initState();
  _recognizer = TextRecognizer();
}

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

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

Логика распознавания

Метод для получения и обработки изображения:

Future<void> _getAndScanImage({final bool? isFromCamera}) async {
  // Очищаем данные
  setState(() {
    _imageFile = null;
    _scanResults = '';
  });

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

  // Обрабатываем
  if (pickedImage != null) {
    final file = File(pickedImage.path);
    setState(() {
      _imageFile = file;
    });

    final results = await _recognizer.processImage(
      InputImage.fromFile(file),
    );

    setState(() {
      _scanResults = results.text;
    });
  }
}

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

Полученный текст можно вывести обычным Text:

Text(_scanResults)

А изображение показать через Image.file(_imageFile!), обернув все в Column:

Column(
  children: [
    if (_imageFile != null) Image.file(_imageFile!),
    const SizedBox(height: 16),
    Text(_scanResults),
  ],
)

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