How To Use File Picker in Flutter?

Introduction

The Filepicker flutter tool is an essential part of any app that requires users to browse and select files from their device's file system.

In Flutter, this tool is available through various packages such as-

1. file_picker
2. desktop_drop
3. file_selector
4. path_provider
5. file_chooser

Filepicker flutter simplifies the process of selecting files and enables developers to perform various operations on them, such as reading their contents, uploading them to a server, or displaying them in the app's UI. By leveraging the different file picker packages available in Flutter, developers can create robust and efficient file selection functionality, improving the user experience and overall app performance.

Currently Supported Features

• Filepicker flutter supports a variety of platforms (Mobile, Web, Desktop, and Flutter GO).
• Uses native pickers by default on the Operating System.
• Various default type filters (media, image, video, audio).
• Pick a single file or multiple files from the local device storage or cloud storage services (GDrive, Dropbox, iCloud).
• Show a progress bar while the file is being uploaded or downloaded.
• Filepicker flutter enables quick load of file data into memory (Uint8List).
• Preview the selected files before uploading or downloading them.

Installing file_picker

Step 1: Create a Flutter Project

Create a new Flutter app by running the below command on your terminal:

Now open your Flutter project in any IDE like Android Studio or VS-Code.

Step 2: Add File_picker Dependency

Open the pubspec.yaml file of your Flutter project and add the File_picker dependency under the dependencies section.

Save the pubspec.yaml file and run the flutter pub get command to install the dependency.

Step 3: Import File_picker.Dart:

Once the dependencies package has been successfully installed, importing it is required to utilize the file picker. Import the package in the main.dart file.

Now, you are ready to pick files easily in the Flutter app.

Example file_picker App

Single File Picker

A single file picker allows the user to select only one file at a time. This widget is useful when you need to select only one file from the user, , for example,, when uploading a profile picture or a document.

Here, we would create a file namedsinglefilepicker.dart and import that later into our main file, ' main.dart`.

This is singlefilepicker.dart file:

This file would now be imported into our main.dart file.

The code is provided here.

Multiple File Picker

The user can select numerous files at once using a multiple-file picker. This widget is helpful when you need to upload several files at once, such as when uploading a batch of documents or a photo album.

We would make the following changes in our singlefilepicker.dart file.

Now, to display the files the user selects, we would create a new file multiplefilepicker.dart.

There would be no changes in our main.dart file.

Pick a Particular File Extension

In Flutter's file_picker package, you can use the type parameter to specify the file types that you want the user to select.

Here is the complete code:

Selected File Details

The FilePickerResult object returned by the pickFiles method contains information about the selected file(s), such as the file name, file path, file size, and MIME type.

Compatibility Chart