Cómo leer facturas con ML Kit en Flutter

Curso de Integración Módulos Nativos iOS/Android para Flutter

Contenido del curso

Fundamentos de Flutter e IA

Introducción a TensorFlow Lite

Integración de modelos y clasificación de imágenes

Reconocimiento de voz con Whisper

MethodChannel

Acceso a sensores y cámara

Gestión de estado con BLoC

Reconocimiento de texto en imágenes

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:38

Cómo leer facturas con ML Kit en Flutter

Curso de Integración Módulos Nativos iOS/Android para Flutter

Clase 24 de 29

Clase 24 / 29

Recursos

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.

Resumen

¿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.

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.

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

¿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.

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?

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

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?

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.

Fundamentos de Flutter e IA

Flutter para Android, iOS y web con un código

IA, Machine Learning y Deep Learning en Flutter

Introducción a TensorFlow Lite

Configura TensorFlow Lite en Flutter

Configuración de modelos TensorFlow Lite en Flutter

Conectar TensorFlow Lite a una interfaz Flutter

Integración de modelos y clasificación de imágenes

Interfaz Flutter que ejecuta un modelo TensorFlow Lite

Seleccionar imágenes de galería en Flutter

Procesar imágenes reales con TensorFlow Lite

Reconocimiento de voz con Whisper

Configuración de permisos para Speech to Text en Android e iOS

Servicio de speech-to-text en Flutter

Conexión de reconocimiento de voz con interfaz visual en móviles

MethodChannel

Comunicación entre Flutter y código nativo con Method Channel

Configuración de Method Channel en Android para obtener nivel de batería

Cómo leer la batería de iOS con Swift

Botón Flutter que lee batería con MethodChannel

Acceso a sensores y cámara

Configuración de Method Channel para cámara en Android desde Flutter

Cámara iOS nativa con MethodChannel en Flutter

Configuración de permisos y provider para cámara en Android

Configuración de permisos de cámara en iOS para Flutter

Integración de cámara nativa iOS en Flutter con Method Channels

Controlador de cámara iOS con FlutterError

Implementación de cámara nativa en apps Android con Flutter

Gestión de estado con BLoC

Implementación de función para capturar transacciones desde imágenes

Cómo leer facturas con ML Kit en Flutter

Reconocimiento de texto en imágenes

Parseo de montos desde texto OCR con regex

Integración de UI con cámara para captura de fotos en Flutter

Cámara en Flutter con BLoC y modal

Actualización de dependencias y corrección de errores en Flutter iOS

Diferencias entre Flutter y React Native para desarrollo móvil

Cómo leer facturas con ML Kit en Flutter