Seleccionar imágenes de galería 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:0010:25

Seleccionar imágenes de galería en Flutter

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

Clase 7 de 29

Clase 7 / 29

Recursos

Integrar la galería del dispositivo a tu app Flutter abre la puerta para enviar imágenes reales a un modelo de IA como Gemini. Aquí aprenderás a configurar image_picker en Flutter, capturar el archivo desde la galería y prepararlo para tu servicio, todo paso a paso y pensado para desarrolladores que ya tienen una base en Dart.

¿Qué librerías necesitas instalar para usar un image picker en Flutter?

Antes de tocar código en main.dart, todo arranca desde el archivo de dependencias.

En el pubspec.yaml agregas dos paquetes que trabajan juntos para seleccionar y manipular imágenes [01:00]:

image_picker en versión 1.0.4, que abre la galería o la cámara del dispositivo.
image, que te permite manipular el archivo seleccionado.

Después corres flutter pub get desde la terminal y listo, ya tienes las librerías disponibles en tu proyecto.

¿Qué hace image_picker en Flutter? Es una librería oficial que abre la galería o cámara del dispositivo y te devuelve el archivo seleccionado como un objeto XFile, listo para procesar o enviar a un servicio.

¿Cómo declarar la variable File para guardar la imagen seleccionada?

Dentro del state de tu widget necesitas una variable privada que almacene la imagen elegida por el usuario.

La declaras como tipo File y la nombras _image, usando guion bajo para marcarla como privada [02:15]. Para que Dart reconozca el tipo File, importas dart:io, que es el paquete que trae las funcionalidades de entrada y salida del lenguaje.

Esa variable arranca como null y se actualizará cuando el usuario elija una foto desde la galería.

¿Cómo crear la función pickImage para abrir la galería?

La función que abre el selector de imágenes debe ser asíncrona porque espera la respuesta del sistema operativo.

La defines como un Future<void> privado y dentro instancias el ImagePicker para tener acceso a sus métodos. Después llamas a pickImage con await, indicando que la fuente será la galería [04:20]:

dart Future<void> _pickImage() async { final picker = ImagePicker(); final pickedFile = await picker.pickImage(source: ImageSource.gallery);

if (pickedFile != null) { setState(() { _image = File(pickedFile.path); }); } }

El método pickImage recibe un parámetro source con dos opciones: ImageSource.camera o ImageSource.gallery. En este flujo eliges galería.

Cuando el usuario selecciona una foto, pickedFile deja de ser nulo y guardas su path dentro de un objeto File, todo esto envuelto en un setState para que el widget se redibuje con la nueva imagen.

¿Por qué usar setState al asignar la imagen?

Flutter solo repinta la interfaz cuando notificas un cambio de estado. Si asignas _image sin setState, el archivo queda guardado en memoria pero la UI no muestra la imagen seleccionada.

¿Cómo validar que la imagen llegue al modelo de IA?

Antes de enviar la imagen al servicio, conviene proteger el flujo con una validación.

Dentro del bloque try catch que llama al modelo, verificas si _image es igual a null. Si lo es, cambias el output por un mensaje claro tipo "Por favor, selecciona una imagen" para que el usuario entienda qué hacer.

Si la imagen sí existe, la pasas como parámetro al roomModel reemplazando el input de texto que tenías antes [07:30]. En el servicio que consume el modelo todavía se espera un input de texto, así que ese ajuste queda pendiente para la siguiente configuración.

¿Cómo verifico si una imagen fue seleccionada en Flutter? Comparas la variable de tipo File contra null con un condicional. Si es distinta de null, el usuario eligió una foto; si es null, todavía falta seleccionarla.

¿Cómo mostrar la imagen seleccionada en el widget?

La interfaz necesita reflejar dos estados: cuando aún no hay imagen y cuando ya se eligió una.

Usas el operador ternario sobre _image para alternar entre un texto y la imagen real:

Si _image es null, devuelves un Text que diga "No se ha seleccionado la imagen aún".
Si ya existe, renderizas Image.file(_image!) con un height de 200 para controlar el tamaño.

Debajo agregas un ElevatedButton cuyo onPressed llama a la función _pickImage, con un Text interno que diga "Seleccionar imagen". Este botón es el disparador visible que conecta al usuario con la galería del dispositivo.

¿Qué diferencia hay entre Image.file e Image.asset?

Image.file carga una imagen desde una ruta del sistema de archivos, como la que devuelve image_picker. Image.asset carga imágenes empaquetadas dentro de tu proyecto. Para fotos seleccionadas por el usuario siempre usas Image.file.

¿Qué falta para enviar la imagen a Gemini desde el servicio?

Con todo lo anterior, tu app ya selecciona una imagen de la galería, la muestra en pantalla y la pasa al roomModel. Lo que sigue es ajustar el servicio para que reciba un archivo en lugar de un string de texto, que es el formato que el modelo espera para procesar contenido visual.

¿Ya probaste integrar image_picker en alguno de tus proyectos? Cuéntame en los comentarios cómo te fue y qué casos de uso le estás dando.

Resumen

¿Qué librerías necesitas instalar para usar un image picker en Flutter?

Antes de tocar código en main.dart, todo arranca desde el archivo de dependencias.

En el pubspec.yaml agregas dos paquetes que trabajan juntos para seleccionar y manipular imágenes [01:00]:

image_picker en versión 1.0.4, que abre la galería o la cámara del dispositivo.
image, que te permite manipular el archivo seleccionado.

Después corres flutter pub get desde la terminal y listo, ya tienes las librerías disponibles en tu proyecto.

¿Qué hace image_picker en Flutter? Es una librería oficial que abre la galería o cámara del dispositivo y te devuelve el archivo seleccionado como un objeto XFile, listo para procesar o enviar a un servicio.

¿Cómo declarar la variable File para guardar la imagen seleccionada?

Dentro del state de tu widget necesitas una variable privada que almacene la imagen elegida por el usuario.

Esa variable arranca como null y se actualizará cuando el usuario elija una foto desde la galería.

¿Cómo crear la función pickImage para abrir la galería?

La función que abre el selector de imágenes debe ser asíncrona porque espera la respuesta del sistema operativo.

dart Future<void> _pickImage() async { final picker = ImagePicker(); final pickedFile = await picker.pickImage(source: ImageSource.gallery);

if (pickedFile != null) { setState(() { _image = File(pickedFile.path); }); } }

El método pickImage recibe un parámetro source con dos opciones: ImageSource.camera o ImageSource.gallery. En este flujo eliges galería.

¿Por qué usar setState al asignar la imagen?

Flutter solo repinta la interfaz cuando notificas un cambio de estado. Si asignas _image sin setState, el archivo queda guardado en memoria pero la UI no muestra la imagen seleccionada.

¿Cómo validar que la imagen llegue al modelo de IA?

Antes de enviar la imagen al servicio, conviene proteger el flujo con una validación.

¿Cómo verifico si una imagen fue seleccionada en Flutter? Comparas la variable de tipo File contra null con un condicional. Si es distinta de null, el usuario eligió una foto; si es null, todavía falta seleccionarla.

¿Cómo mostrar la imagen seleccionada en el widget?

La interfaz necesita reflejar dos estados: cuando aún no hay imagen y cuando ya se eligió una.

Usas el operador ternario sobre _image para alternar entre un texto y la imagen real:

Si _image es null, devuelves un Text que diga "No se ha seleccionado la imagen aún".
Si ya existe, renderizas Image.file(_image!) con un height de 200 para controlar el tamaño.

¿Qué diferencia hay entre Image.file e Image.asset?

¿Qué falta para enviar la imagen a Gemini desde el servicio?

¿Ya probaste integrar image_picker en alguno de tus proyectos? Cuéntame en los comentarios cómo te fue y qué casos de uso le estás dando.

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

Seleccionar imágenes de galería en Flutter