Seleccionar imágenes de galería en Flutter

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.