Cámara en Flutter con BLoC y modal

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:59

Cámara en Flutter con BLoC y modal

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

Clase 27 de 29

Clase 27 / 29

Recursos

Integrar la cámara en una app de Flutter usando el patrón BLoC te permite capturar fotos, extraer datos como montos y abrirlos en un modal para registrar ingresos o gastos. Esta guía te muestra cómo conectar el repositorio, los estados y los permisos en iOS y Android para que tu flujo funcione de extremo a extremo.

¿Cómo conectar el widget modal con el BLoC en Flutter?

El primer paso es separar el modal en su propio widget para que sea reutilizable y pueda acceder al BLoC y a toda la información que ya manejas. En lugar de invocar el modal directamente desde la pantalla, lo llamas a través de la funcionalidad takePicture que vive dentro del bloque.

Desde el contexto haces la lectura del BLoC y disparas el método addTransactionFromImage, pasándole el path de la imagen. Así, cada vez que el usuario active esa función, se ejecuta todo el proceso: abrir cámara, tomar foto, extraer texto y abrir el modal.

¿Qué hace el método addTransactionFromImage? Recibe la ruta de una imagen, llama al repositorio para procesarla y devuelve el monto extraído al BLoC, que luego dispara el modal de ingreso o gasto.

¿Cómo crear el estado showTransactionModalState?

En la sección del notebook defines la lectura de la funcionalidad y llamas a un nuevo estado llamado showTransactionModalState. Le envías el amount capturado y cierras la línea.

Luego vas a la carpeta de estados, tomas una de las clases existentes como plantilla y replicas la estructura. Este estado queda esperando el amount y lo inicializa al recibirlo. Para pasar el dato, creas un override que contiene un objeto con la propiedad amount, donde guardas el monto total.

¿Cómo escuchar cambios de estado con BlocListener?

El BlocListener es el widget que monitorea constantemente el estado del BLoC y reacciona cuando hay cambios. Lo agregas en la sección de UI, dentro del navbar, para que esté siempre activo mientras la pantalla esté visible.

Dentro del listener defines el contexto, el estado a observar y el condicional. Si el estado está presente y contiene un monto válido, accedes al widget del modal y le pasas el dato.

Llamas a takePicture para abrir la cámara desde el repositorio.
El BLoC revisa de forma continua si ya hay un amount disponible.
Cuando el monto existe, se abre el modal de income o expense.

Un detalle técnico: el amount viene como double, pero el modal espera un string. Por eso haces la conversión usando state.amount.toString() antes de inyectarlo en el widget.

¿Para qué sirve un BlocListener? Es un widget que escucha cambios de estado en un BLoC y ejecuta efectos secundarios, como abrir un modal o mostrar un snackbar, sin reconstruir toda la UI.

¿Qué flujo sigue la app al tomar una foto?

El flujo completo conecta cámara, repositorio, BLoC y UI en una sola cadena de eventos. Así se ve paso a paso:

El usuario activa takePicture desde el botón.
El repositorio abre la cámara y captura la imagen.
Se extrae el texto y se identifica el monto.
El BLoC actualiza showTransactionModalState con el amount.
El BlocListener detecta el cambio y abre el modal con el dato precargado.

Con esa secuencia, evitas acoplar la lógica de cámara con la UI y mantienes cada capa enfocada en una sola responsabilidad.

¿Cómo configurar permisos de cámara en iOS y Android?

Antes de emular la app necesitas declarar los permisos en ambas plataformas. Sin esto, el sistema operativo bloquea el acceso a la cámara y al almacenamiento.

Para iOS abres la carpeta ios y editas el archivo Info.plist, donde agregas la clave de permiso de cámara con su descripción de uso. Esa descripción es la que aparece en el popup que ve el usuario.

En Android vas a android/app/src/main y editas el AndroidManifest.xml. Allí declaras tres permisos:

Permiso para usar la cámara y tomar la foto.
Permiso para acceder al almacenamiento de la galería.
Permiso de escritura para guardar la imagen.

Además, en Android debes agregar el provider al final del bloque <application> dentro del manifest. Ese provider habilita el acceso seguro a archivos temporales generados por la cámara.

¿Por qué Android necesita un provider extra? Desde Android 7 el sistema bloquea URIs de archivos directos. El FileProvider genera URIs seguras para que la cámara pueda guardar y compartir la foto sin errores de permisos.

Con todo conectado (BLoC, listener, modal y permisos) tu app queda lista para emular y probar el flujo real. Cuéntame en los comentarios qué parte del flujo te resultó más útil o si vas a adaptarlo a otro caso de uso.

Resumen

¿Cómo conectar el widget modal con el BLoC en Flutter?

¿Qué hace el método addTransactionFromImage? Recibe la ruta de una imagen, llama al repositorio para procesarla y devuelve el monto extraído al BLoC, que luego dispara el modal de ingreso o gasto.

¿Cómo crear el estado showTransactionModalState?

En la sección del notebook defines la lectura de la funcionalidad y llamas a un nuevo estado llamado showTransactionModalState. Le envías el amount capturado y cierras la línea.

¿Cómo escuchar cambios de estado con BlocListener?

Dentro del listener defines el contexto, el estado a observar y el condicional. Si el estado está presente y contiene un monto válido, accedes al widget del modal y le pasas el dato.

Llamas a takePicture para abrir la cámara desde el repositorio.
El BLoC revisa de forma continua si ya hay un amount disponible.
Cuando el monto existe, se abre el modal de income o expense.

Un detalle técnico: el amount viene como double, pero el modal espera un string. Por eso haces la conversión usando state.amount.toString() antes de inyectarlo en el widget.

¿Para qué sirve un BlocListener? Es un widget que escucha cambios de estado en un BLoC y ejecuta efectos secundarios, como abrir un modal o mostrar un snackbar, sin reconstruir toda la UI.

¿Qué flujo sigue la app al tomar una foto?

El flujo completo conecta cámara, repositorio, BLoC y UI en una sola cadena de eventos. Así se ve paso a paso:

El usuario activa takePicture desde el botón.
El repositorio abre la cámara y captura la imagen.
Se extrae el texto y se identifica el monto.
El BLoC actualiza showTransactionModalState con el amount.
El BlocListener detecta el cambio y abre el modal con el dato precargado.

Con esa secuencia, evitas acoplar la lógica de cámara con la UI y mantienes cada capa enfocada en una sola responsabilidad.

¿Cómo configurar permisos de cámara en iOS y Android?

Antes de emular la app necesitas declarar los permisos en ambas plataformas. Sin esto, el sistema operativo bloquea el acceso a la cámara y al almacenamiento.

En Android vas a android/app/src/main y editas el AndroidManifest.xml. Allí declaras tres permisos:

Permiso para usar la cámara y tomar la foto.
Permiso para acceder al almacenamiento de la galería.
Permiso de escritura para guardar la imagen.

Además, en Android debes agregar el provider al final del bloque <application> dentro del manifest. Ese provider habilita el acceso seguro a archivos temporales generados por la cámara.

¿Por qué Android necesita un provider extra? Desde Android 7 el sistema bloquea URIs de archivos directos. El FileProvider genera URIs seguras para que la cámara pueda guardar y compartir la foto sin errores de permisos.

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ámara en Flutter con BLoC y modal