Open In App

Flutter – Select Single and Multiple Files From Device

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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"),
        ));
  }
}




Last Updated : 07 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads