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,
)),
],
)
],
)