Flutter: selecciona y abre archivos desde el almacenamiento

A veces, en una aplicación, necesitamos elegir y abrir un archivo del almacenamiento del teléfono; en este artículo, lograremos lo mismo usando los paquetes file_picker y open_file flutter.

1. Crea una aplicación:

Cree una nueva aplicación flutter ejecutando el siguiente comando en su terminal:

flutter create your_app_name

Ahora abra su proyecto flutter en cualquier IDE como Android-Studio o VS-Code.

2. Cree una interfaz de usuario básica:

Ahora elimine todo el código repetitivo de lib/main.dart y agregue código para su interfaz de usuario. Para demostración, tengo un Botón de material centrado.

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.green[100],
        body: Center(
          child: MaterialButton(
            onPressed: () {},
            child: Text(
              'Pick and open file',
              style: TextStyle(color: Colors.white),
            ),
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

Producción:

3. Ahora agregue los paquetes:

Ejecute el siguiente comando en la terminal para agregar el paquete file_picker :

flutter pub add file_picker

y para agregar el paquete open_file , ejecute este comando:

flutter pub add open_file

4. Importar los paquetes:

Para usar los paquetes file_picker y open_file , impórtelos agregando la siguiente línea en su lib/main.dart :

import 'package:file_picker/file_picker.dart';
import 'package:open_file/open_file.dart';

5. Cree una función para seleccionar archivos del almacenamiento:

void _pickFile() async {
    // opens storage to pick files and the picked file or files
    // are assigned into result and if no file is chosen result is null.
    // you can also toggle "allowMultiple" true or false depending on your need
    final result = await FilePicker.platform.pickFiles(allowMultiple: false);
  
    // if no file is picked
    if (result == null) return;
  
    // we will log the name, size and path of the
    // first picked file (if multiple are selected)
    print(result.files.first.name);
    print(result.files.first.size);
    print(result.files.first.path);
  }

En la función _pickFile , estamos usando el objeto FilePicker del paquete pick_files para seleccionar el archivo y luego esperamos y los datos de tipo FilePickerResult que se devuelven se guardan en la variable de resultado y, si no se selecciona ningún archivo, a la variable de resultado se le asigna un valor nulo . valor. También puede alternar allowMultiple verdadero o falso dependiendo de si desea elegir archivos únicos o múltiples. Después de eso, si el resultado es nulo o no se selecciona ningún archivo, finalizamos la función. Si se seleccionan los archivos, simplemente registramos el nombre , el tamaño y la ruta del primer archivo.

Luego, para poner las cosas en marcha, llamamos a la función _pickFIle en la devolución de llamada onPressed del botón de material. Después de todo, nuestro lib/main.dart se ve así:

import 'package:file_picker/file_picker.dart';
import 'package:open_file/open_file.dart';
import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  void _pickFile() async {
      
    // opens storage to pick files and the picked file or files
    // are assigned into result and if no file is chosen result is null.
    // you can also toggle "allowMultiple" true or false depending on your need
    final result = await FilePicker.platform.pickFiles(allowMultiple: false);
  
    // if no file is picked
    if (result == null) return;
  
    // we will log the name, size and path of the
    // first picked file (if multiple are selected)
    print(result.files.first.name);
    print(result.files.first.size);
    print(result.files.first.path);
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.green[100],
        body: Center(
          child: MaterialButton(
            onPressed: () {
              _pickFile();
            },
            child: Text(
              'Pick and open file',
              style: TextStyle(color: Colors.white),
            ),
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

Producción:

6. Cree una función para abrir el archivo seleccionado:

Ahora que tenemos la funcionalidad para seleccionar archivos del almacenamiento, pasemos a abrir los archivos seleccionados en aplicaciones nativas. Para ello creamos una función llamada _openFile que toma un parámetro de tipo PlatformFile y abre ese archivo:

void _openFile(PlatformFile file) {
    OpenFile.open(file.path);
  }

Ahora, en la función _pickFile en lugar de registrar el nombre del archivo elegido, llamemos a la función _openFile y pasemos el primer archivo del objeto de resultado .

void _pickFile() async {
    // opens storage to pick files and the picked file or files
    // are assigned into result and if no file is chosen result is null.
    // you can also toggle "allowMultiple" true or false depending on your need
    final result = await FilePicker.platform.pickFiles(allowMultiple: true);
  
    // if no file is picked
    if (result == null) return;
  
    // we get the file from result object
    final file = result.files.first;
  
    _openFile(file);
  }

Ahora, después de todo esto, nuestro lib/main.dart se ve así:

import 'package:file_picker/file_picker.dart';
import 'package:open_file/open_file.dart';
import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  void _pickFile() async {
      
    // opens storage to pick files and the picked file or files
    // are assigned into result and if no file is chosen result is null.
    // you can also toggle "allowMultiple" true or false depending on your need
    final result = await FilePicker.platform.pickFiles(allowMultiple: true);
  
    // if no file is picked
    if (result == null) return;
  
    // we get the file from result object
    final file = result.files.first;
  
    _openFile(file);
  }
  
  void _openFile(PlatformFile file) {
    OpenFile.open(file.path);
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.green[100],
        body: Center(
          child: MaterialButton(
            onPressed: () {
              _pickFile();
            },
            child: Text(
              'Pick and open file',
              style: TextStyle(color: Colors.white),
            ),
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

Producción: