Flutter - Select Single and Multiple Files From Device

Last Updated : 07 Mar, 2023

We will explore how to select single, or multiple files from our device with different conditions. Sometimes it happens that we want to select only a single type of file or with a fixed extension. If you are looking for the same just read the article till the end.

Step By Step Implementation

1. Create your flutter project

Dart

flutter create file_picker_template

2. Create a stateful widget with scaffold and create a simple Button in this scaffold

Dart

import 'package:flutter/material.dart';

class FilepickerScreen extends StatefulWidget {
  const FilepickerScreen({super.key});

  @override
  State<FilepickerScreen> createState() => _FilepickerScreenState();
}

class _FilepickerScreenState extends State<FilepickerScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: const Text("Select File"),
        ));
  }
}

3. Add file picker package in pubscpec.yaml file

Dart

flutter:
    sdk: flutter

cupertino_icons: ^1.0.2
file_picker: ^5.2.4

4. Create a Variable for showing and storing file

Dart

// Variable for 
// showing single file
File? _file; 

// Variable for 
// showing multiple file
List<File?> _files;

5. File Picker Implementation

5.1. Single file

Dart

 getFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      final file = File(result.files.single.path!);
      _file = file;
      setState(() {});
    } else {
      // User canceled the picker
      // You can show snackbar or fluttertoast
      // here like this to show warning to user
      // ignore: use_build_context_synchronously
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
        content: Text('Please select file'),
      ));
    }
  }

5.2. Multiple Files

Dart

 getMultipleFile() async {
    FilePickerResult? result =
        await FilePicker.platform.pickFiles(allowMultiple: true,
        type: FileType.any,
        
        );

    if (result != null) {
      List<File?> file = result.paths.map((path) => File(path!)).toList();
      file = files;
      setState(() {});
    } else {
      
      // User canceled the picker and didn't
      // select atleast 1 file from device
      // You can show snackbar or fluttertoast
      // here like this to show warning to user
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
        content: Text('Please select atleast 1 file'),
      ));
    }
  }

6. Call the function on the button onpressed

6.1. Single File

Dart

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () {
            getFile();
          },
          label: const Text("Select File"),
        )

6.2. Multiple File

Dart

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () {
            getMultipleFile();
          },
          label: const Text("Select File"),
        )

7. To show the selected file in your app. You have to show depending on the file you selected and use it where you want.

For Testing, we have viewed like this

7.1. Single File

Dart

 Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  _file != null ? "File Name:- " : "No file is Selected",
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(  _file != null ? _file!.path.split("/").last : "",
                     // To show  name of file selected 
                     textAlign: TextAlign.center,
                    style: const TextStyle(
                      color: Colors.black,
                    )),
              ],
            )
          ],
        )

7.2. Multiple File

Dart

ListView.builder(
          itemCount: files.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text( files[index]!.path.split("/").last ,
                  // To show name of files selected 
                  style: const TextStyle(color: Colors.black)),
            );
          },
        )

Note: You can restrict which type of file as well as the extension of the selected file

Dart

FilePicker.platform.pickFiles(
        allowMultiple: true,
        // You want to pass different argument
          // in these 2 property in above function
        type: FileType.audio,
        allowedExtensions: ["pdf", "docx"]);
// 1.File type
// Expected arguments you can pass
// FileType.image // For selecting images only
// FileType.audio // For selecting file type related to audio

// FileType.media // For selecting file type related to any media include image,audio,video
// FileType.video // For selecting file type related to video
// FileType.custom // For selecting file type related to any custom file type which is not available in this list
// FileType.any // For selecting any type of file

// 2.allowedExtensions
// In this you pass a list of extensions you want to allowed to be selected from device
// Different extensions like png,pdf,jpg,jpeg,apk ,cls and many more

Full Source Code

1. Single File

Dart

import 'dart:io';

import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';

class SingleFilepickerScreen extends StatefulWidget {
  const SingleFilepickerScreen({super.key});

  @override
  State<SingleFilepickerScreen> createState() => _SingleFilepickerScreenState();
}

class _SingleFilepickerScreenState extends State<SingleFilepickerScreen> {
  // Variable for 
  // showing single file
  File? _file; 

  getFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      final file = File(result.files.single.path!);
      _file = file;
      setState(() {});
    } else {
      // User canceled the picker
      // You can show snackbar or fluttertoast 
      // here like this to show warning to user
      // ignore: use_build_context_synchronously
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
        content: Text('Please select file'),
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  _file != null ? "File Name:- " : "No file is Selected",
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(_file != null ? _file!.path.split("/").last : "",
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                      color: Colors.black,
                    )),
              ],
            )
          ],
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () {
            getFile();
          },
          label: const Text("Select File"),
        ));
  }
}

2. Multiple File

Dart

import 'dart:io';

import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';

class MultipleFilepickerScreen extends StatefulWidget {
  const MultipleFilepickerScreen({super.key});

  @override
  State<MultipleFilepickerScreen> createState() =>
      _MultipleFilepickerScreenState();
}

class _MultipleFilepickerScreenState extends State<MultipleFilepickerScreen> {
  getMultipleFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles(
      allowMultiple: true,
      // You want to pass different argument 
      // in these 2 property in above function
    );
    // 1.File type
    // Expected arguments you can pass
    // FileType.image // For selecting images only
    // FileType.audio // For selecting file type related to audio

    // FileType.media // For selecting file type related to any media include image,audio,video
    // FileType.video // For selecting file type related to video
    // FileType.custom // For selecting file type related to any custom file type which is not available in this list
    // FileType.any // For selecting any type of file

    // 2.allowedExtensions
    // In this you pass a list of extensions you want to allowed to be selected from device
    // Different extensions like png,pdf,jpg,jpeg,apk ,cls and many more

    if (result != null) {
      List<File?> file = result.paths.map((path) => File(path!)).toList();
      files = file;
      setState(() {});
    } else {
      // User canceled the picker and didn't select atleast 1 file from device

      // You can show snackbar or fluttertoast here like this to show warning to user
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
        content: Text('Please select atleast 1 file'),
      ));
    }
  }

  // Variable for showing multiple file
  List<File?> files = []; 
  @override
  Widget build(BuildContext context) {
    print(files);
    return Scaffold(
        body: ListView.builder(
          itemCount: files.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text(files[index]!.path.split("/").last,
                  style: TextStyle(color: Colors.black)),
            );
          },
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () {
            // Function for 
            // selecting multiple files
            getMultipleFile();
          },
          label: const Text("Select File"),
        ));
  }
}

Flutter - Create an Excel Sheet and Save the File in Device

flutterwings

Improve

Article Tags :

Flutter - Select Single and Multiple Files From Device

Step By Step Implementation

Full Source Code

Similar Reads

Thank You!

What kind of Experience do you want to share?