Contenido del curso

Acceso a sensores y cámara

Cómo leer facturas con ML Kit en Flutter

Resumen

Crear un evento Bloc para procesar imágenes en Flutter te permite conectar la captura de un recibo con la extracción automática de su monto total. Esta guía muestra cómo estructurar el evento, el state y el repositorio que usan Google ML Kit Text Recognition para leer facturas dentro de una app de finanzas.

¿Cómo se define el evento AddTransactionFromImage en Bloc?

El evento es la señal que dispara el procesamiento. Aquí defines qué información viaja desde la UI hacia la lógica de negocio.

Partiendo de una clase existente, la transformas en AddTransactionFromImage que extiende de los eventos del Bloc. Dentro declaras una variable imagePath de tipo String, la inicializas en el constructor y la expones a través de props usando un getter con arrow function que devuelve una lista con esa imagen.

  • Nombre del evento: AddTransactionFromImage.
  • Variable interna: imagePath.
  • Exposición: lista de objetos en props con la imagen.

¿Qué hace un evento en el patrón Bloc? Un evento describe una intención del usuario, como subir una foto de un recibo. El Bloc lo escucha y decide qué lógica ejecutar y qué state emitir.

¿Qué states necesitas para el procesamiento de la imagen?

El state representa cada momento del flujo: cuando empieza a procesar y cuando termina con un resultado.

Se crean dos states que extienden del state base del componente. El primero, TransactionProcessingImage, queda vacío porque solo indica que el procesamiento está en curso. El segundo, TransactionFromImageAgregado, recibe una variable monto de tipo double en su constructor con this, lista para almacenar el valor extraído.

¿Por qué separar el state de procesamiento del state de resultado?

Porque la UI necesita saber si debe mostrar un loader o ya pintar el monto. Tener dos states diferenciados evita lógica condicional confusa en la vista y deja claro el ciclo de vida de la operación.

¿Cómo se construye el repositorio que extrae texto con ML Kit?

El repositorio es el puente entre el Bloc y la librería de reconocimiento. Allí vive la integración con Google ML Kit.

En repositories/inputExpense declaras una función asíncrona que devuelve un Future<double> y recibe el path que viajó desde el evento y el state. Antes de codificar, agregas la dependencia de google_mlkit_text_recognition en el pubspec.yaml y corres flutter pub get para instalarla.

  • Tipo de retorno: Future<double>.
  • Parámetro: path de la imagen.
  • Librería: paquete oficial de Google para Dart.
  • Comando de instalación: flutter pub get.

¿Qué es Google ML Kit Text Recognition? Es una librería de Google que reconoce texto dentro de imágenes. Soporta varios alfabetos y se integra a Flutter mediante un paquete de Dart que expone la clase TextRecognizer.

¿Cómo se configura el TextRecognizer en Flutter?

Instancias TextRecognizer indicando el script con el que debe leer la imagen. En este caso usas .latin porque las facturas están en alfabeto latino. Esa configuración determina qué modelo de reconocimiento se carga internamente.

¿Cómo se procesa la imagen y se devuelve el monto?

Dentro de un bloque try catch creas una variable inputImage usando InputImage.fromFilePath(path), donde path es el mismo que viene desde el Bloc. Después llamas a processImage sobre el TextRecognizer con await, esperas el resultado y retornas una función auxiliar totalAmount que recibe el .text del resultado.

Al final cierras el recognizer con close() para liberar memoria y evitar que siga procesando en segundo plano.

  • Crear inputImage desde el path.
  • Esperar processImage con await.
  • Retornar totalAmount(result.text).
  • Cerrar el TextRecognizer al terminar.

¿Qué falta para completar la extracción del monto?

Ya tienes el evento, los dos states y el repositorio que abstrae el texto crudo de la factura. Lo siguiente es construir el método totalAmount que parsea ese texto y devuelve el valor numérico del total, separándolo del resto de líneas del recibo.

Cuéntame en los comentarios qué librería de OCR has probado en tus proyectos Flutter y cómo te fue con el reconocimiento en alfabetos distintos al latino.