Como seleccionar una imagen de la galería

Seleccionar una imagen de la galería en una aplicación Flutter es una tarea bastante común y se logra principalmente utilizando plugins. Uno de los más populares y fáciles de usar es image_picker.

Pasos a seguir:

1. Agregar el plugin a tu proyecto:

   • Abre el archivo pubspec.yaml de tu proyecto.
   • Agrega la siguiente línea a la sección de dependencies:
     YAML

     image_picker: ^0.8.4+3
     

   • Ejecuta flutter pub get para instalar el plugin.

2. Importar el plugin en tu archivo Dart:

   Dart

   import 'dart:io';
   import 'package:flutter/material.dart';
   import 'package:image_picker/image_picker.dart';
   

3. Crear una función para seleccionar la imagen:

   Dart

   Future<void> _pickImage() async {
     final picker = ImagePicker();
     final pickedFile = await picker.getImage(source: ImageSource.gallery);
   
     setState(() {
       if (pickedFile != null) {
         // Aquí puedes asignar la imagen seleccionada a una variable
         _image = File(pickedFile.path);
       } else {
         print('No image selected.');
       }
     });
   }
   

   • ImagePicker(): Crea una instancia de la clase ImagePicker.
   • getImage(): Este método te permite seleccionar una imagen ya sea de la galería o de la cámara. En este caso, estamos usando ImageSource.gallery para seleccionar de la galería.
   • setState(): Actualiza el estado de tu widget para mostrar la imagen seleccionada.

4. Mostrar la imagen:

   Dart

   // ...
   body: Center(
     child: Column(
       children: [
         if (_image != null) Image.file(_image),
         ElevatedButton(
           onPressed: _pickImage,
           child: Text('Seleccionar Imagen'),
         ),
       ],
     ),
   ),
   // ...
   

Código completo de ejemplo:

Dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File _image;

  Future<void> _pickImage() async {
    // ... código de la función _pickImage
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Seleccionar Imagen'),
      ),
      body: Center(
        // ... código para mostrar la imagen y el botón
      ),
    );
  }
}

Explicación:

• _image: Esta variable de tipo File almacenará la ruta de la imagen seleccionada.
• _pickImage(): Esta función se ejecuta cuando el usuario presiona el botón para seleccionar una imagen.
• Image.file(_image): Este widget muestra la imagen seleccionada.

Personalizaciones:

• Recortar imagen: Puedes utilizar el plugin image_cropper para permitir al usuario recortar la imagen antes de usarla.
• Comprimir imagen: Si necesitas reducir el tamaño de la imagen, puedes utilizar el plugin flutter_image_compress.
• Mostrar un preview: Mientras el usuario selecciona la imagen, puedes mostrar un preview de la misma.