The developer community has been buzzing about Flutter because of its mobile, desktop, and web applications possibilities. The ability of any application to pick files from the device while it is operating is its most notable feature. The performance of the particular program improves with smoother file selection. This is the point at which the Flutter file picker enters the picture. With this plugin, flutter file upload has been made easy.
The native file explorer may now be explored and used for file selection using the Flutter file_picker package. You may conclude your work without any delays by using this plugin to rapidly locate any photographs, movies, or files on the device.
Let’s look at how you use a file picker in Flutter and explain how it functions through a Flutter file picker example. Let’s begin working on it.
What Is Flutter File Picker?
Flutter file_picker is the plugin in Flutter that enables users to browse and select their desired files from the device. Flutter file_picker provides an accessible doorway to the user’s native file explorer for selecting multiple files.
What Is The Difference Between An Image Picker Flutter And A file_picker In Flutter?
Unlike the Flutter image picker, which only supports images or videos, the file_picker package offers multiple formats of files to be uploaded.
As you give an open command prompt to your computer browser, the file_picker package brings that function to your application.
👉 How to add cupertino date picker in flutter
Features Of Flutter File Picker
The following are the most prominent features of the Flutter file picker:
- With the file_picker package in Flutter, you can choose one or multiple files from your device.
- In addition to the number, it also supports multiple file types with custom format filtering. You can also limit the file type to your choice. For example, you can ask the application to select image-based files only.
- You can access multiple platforms with the same plugin, including Mobile, Desktop, Go-Flutter, or Web.
- The cloud files (iCloud, DropBox, or GDrive) are also available with Flutter file picker.
Flutter File Picker Example For Web
So far, you have a slight clearance on the flutter file picker; let’s move to how you use a flutter file picker.
The following are the more straightforward steps:
- The first and prime step to use the file_picker package in the flutter is to add the flutter file_picker to your project. You can do this by mentioning the file_picker package and its version in the ‘pubspec.yaml’ file. Then run the ‘flutter pub get’ command at the terminal to download the file_picker package. And to know the flutter command flow visit 👉“https://flutterdesk.com/waiting-for-another-flutter-command-to-release-the-startup-lock/“
dependencies:
flutter:
sdk: flutter
file_picker: ^version
2. The next step is to import the added package to the dart file.
import 'dart:io'; import 'package:file_picker/file_picker.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart';
3. After you finish these two, you can use the Flutter file picker plugin
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
File? file;
FilePickerResult? result;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('File Picker')),
body: Center(
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
if (file != null || result != null) ...[
if (kIsWeb) ...[
Image.memory(
result!.files.first.bytes!,
height: 350,
width: 350,
fit: BoxFit.fill,
),
] else ...[
Image.file(file!, height: 150, width: 150, fit: BoxFit.fill),
],
const SizedBox(height: 8),
],
ElevatedButton(
onPressed: () async {
try {
result = await FilePicker.platform.pickFiles();
if (result != null) {
if (!kIsWeb) {
file = File(result!.files.single.path!);
}
setState(() {});
} else {
// User canceled the picker
}
} catch (_) {}
},
child: const Text('Pick File'),
),
]),
),
);
}
}
The file_picker in this illustration is opened using FilePicker.platform.pickFiles(). This method waits for the user to select a file. A file_picker produces a FilePickerResult once a file has been selected, containing details about the selected file(s), using result.files.single.path, you can then create a File object by accessing the path of the chosen file.
You may want to get a permit for multiple platforms, which restricts your capability to pick files from them. For this concern, you can use the ‘permission_handler’ package with the file_picke package.
Flutter File Picker for Multiple Platforms
For iOS
For macOS
For Windows
For Android
For Web
For Linux
Image Picker Flutter
The code mentioned above is to add file format from the device using Flutter file picker; what if you want to add image or Mp4 format?
How can you add other formats with the File picker in Flutter:
FilePickerResult? result = await FilePicker.platform.pickFiles(
type: FileType.custom,
allowedExtensions: ['jpg', 'png', 'mp4', 'avi'],
);
if(result != null) {
File file = File(result.files.single.path!);
} else {
// User canceled the picker
}
This is the visual illustration of how the flutter image picker works:
In the code mentioned above, we use ‘Filetype.custom’, which enables you to choose your desired file type extension.
How To Get The File Path In The Flutter File Picker?
Getting an SDK path to your file while using Flutter file picker is prime as it directs you to the path to the system’s file directory. It is more like an address to your file directory, which you can use anytime to get redirected to the file’s location.
import 'package:file_picker/file_picker.dart';
void pickFile() async {
FilePickerResult? result = await FilePicker.platform.pickFiles();
if(result != null) {
String filePath = result.files.single.path!;
print(filePath);
} else {
// User canceled the picker
}
}
In this example, after the file is picked, ‘result.file.single.path’ gives you the path of the single selected file. Remember, these paths are platform-dependent and might require permission to run on others. Secondly, the path is always ‘null’ at the web Platform since the web has no access to the files directory.
Conclusion
With a flutter-made application, you can enable multiple features you wouldn’t have imagined with an application made with another framework. Like other plugins, flutter file picker brings the file-picking capability to the fingertips. It not just supports multiple formats but also assists in carrying the same function on multiple platforms.
So if you want to send any files to your client or task due, do it now with the file_picker package and track down all the paths.
Other than this, flutter offers many more features to your application that you might need to become more familiar with. To get aware of those, you can hire a Flutter app developer to get expert assistance in file picker packages and other Flutter services.
