Saltar al contenido

¿Cómo guardar un archivo de imagen en Flutter? Archivo seleccionado usando el complemento Image_picker

Posteriormente a observar en diferentes repositorios y sitios al terminar nos hemos encontrado la resolución que te enseñaremos ahora.

Solución:

Utilizando await ImagePicker.pickImage(...)ya estás en el camino correcto porque la función devuelve un File.

los File la clase tiene un copy método, que puede usar para copiar el archivo (que ya está guardado en el disco por la cámara o en la galería) y colocarlo en el directorio de documentos de su aplicación:

// using your method of getting an image
final File image = await ImagePicker.pickImage(source: imageSource);

// getting a directory path for saving
final String path = await getApplicationDocumentsDirectory().path;

// copy the file to a new path
final File newImage = await image.copy('$path/image1.png');

setState(() 
  _image = newImage;
);

También debe tener en cuenta que puede obtener la ruta del archivo de imagen de ImagePicker utilizando image.pathque también contendrá el final del archivo que quizás desee extraer y puede guardar la ruta de su imagen usando newImage.path.

La respuesta de @creativecreatorormaybenot es realmente útil, pero se perdió una parte importante, es decir, recuperar la imagen para su uso posterior.

Guardar imagen

// Step 1: Retrieve image from picker 
final File image = await ImagePicker.pickImage(source: imageSource);

// Step 2: Check for valid file
if (image == null) return;

// Step 3: Get directory where we can duplicate selected file.
final String path = await getApplicationDocumentsDirectory().path;

// Step 4: Copy the file to a application document directory. 
final var fileName = basename(file.path);
final File localImage = await image.copy('$path/$fileName');

Consejo: puede recuperar nombre del archivo del archivo original usando nombrebase(archivo.ruta). Asegúrese de importar ‘paquete:ruta/ruta.dart’;

Recuperando/Cargando Imagen

// Step 1: Save image/file path as string either db or shared pref
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setString('test_image', localImage.path)

// Step 2: Loading image by using the path that we saved earlier. We can create a file using path 
//         and can use FileImage provider for loading image from file.
CircleAvatar(
          backgroundImage: FileImage(File(prefs.getString('test_image')),
          radius: 50,
          backgroundColor: Colors.white)

A partir de image_picker 0.6.7

pickImage, pickVideo y retrieveLostData están obsoleto.
https://pub.dev/packages/image_picker#-changelog-tab-

Esos métodos tienen que ser reemplazados por

  • getImage
  • getVideo
  • getLostData

Un ejemplo de uso de la getImage() método:

...
File _storedImage;
...

void _takePicture() async 
  // 1. Create an ImagePicker instance.
  final ImagePicker _picker = ImagePicker();

  // 2. Use the new method.
  //
  // getImage now returns a PickedFile instead of a File (form dart:io)
  final PickedFile pickedImage = await _picker.getImage(...)

  // 3. Check if an image has been picked or take with the camera.
  if (pickedImage == null) 
    return;
  

  // 4. Create a File from PickedFile so you can save the file locally
  // This is a new/additional step.
  File tmpFile = File(pickedFile.path);

  // 5. Get the path to the apps directory so we can save the file to it.
  final String path = await getApplicationDocumentsDirectory().path;
  final String fileName = basename(pickedFile.path); // Filename without extension
  final String fileExtension = extension(pickedFile.path); // e.g. '.jpg'

  // 6. Save the file by copying it to the new location on the device.
  tmpFile = await tmpFile.copy('$path/$fileName$fileExtension');

  // 7. Optionally, if you want to display the taken picture we need to update the state
  // Note: Copying and awaiting the file needs to be done outside the setState function.
  setState(() => _storedImage = tmpFile);

A ejemplo un poco más compacto:

File _image;
final picker = ImagePicker();

Future getImage() async 
  final File pickedImage = await picker.getImage(source: ImageSource.camera);

  if (pickedImage == null) return;

  File tmpFile = File(pickedImage.path);
  tmpFile = await tmpFile.copy(tmpFile.path);

  setState(() 
    _image = tmpFile;
  );

Comentarios y valoraciones del tutorial

Si te ha resultado útil nuestro post, agradeceríamos que lo compartas con más juniors de este modo contrubuyes a dar difusión a nuestra información.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *