Cómo leer facturas con ML Kit en Flutter
Curso de Integración Módulos Nativos iOS/Android para Flutter
Contenido del curso
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
- 16

Configuración de Method Channel para cámara en Android desde Flutter
10:53 min - 17

Cámara iOS nativa con MethodChannel en Flutter
12:36 min - 18

Configuración de permisos y provider para cámara en Android
10:12 min - 19

Configuración de permisos de cámara en iOS para Flutter
06:38 min - 20

Integración de cámara nativa iOS en Flutter con Method Channels
13:51 min - 21

Controlador de cámara iOS con FlutterError
12:30 min - 22

Implementación de cámara nativa en apps Android con Flutter
12:22 min
Gestión de estado con BLoC
Reconocimiento de texto en imágenes
- 25

Parseo de montos desde texto OCR con regex
07:08 min - 26

Integración de UI con cámara para captura de fotos en Flutter
06:19 min - 27

Cámara en Flutter con BLoC y modal
08:59 min - 28

Actualización de dependencias y corrección de errores en Flutter iOS
15:44 min - 29

Diferencias entre Flutter y React Native para desarrollo móvil
11:54 min
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
propscon 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:
pathde 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
inputImagedesde elpath. - Esperar
processImageconawait. - Retornar
totalAmount(result.text). - Cerrar el
TextRecognizeral 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.