Flutter – Pick and Open Files From Storage

07 Dec, 2021
Sometimes in an app, we need to pick and open a file from the phone’s storage, in this article, we will achieve the same using file_picker and open_file flutter packages.
Create a new flutter app by running the below command on your terminal:
flutter create your_app_name
Now open your flutter project in any IDE like Android-Studio or VS-Code.
Now remove all the boilerplate code from lib/main.dart and add code for your UI. For demonstration, I have a centered Material Button.
Dart
import 'package:flutter/material.dart';  void main() {  runApp(MyApp());}  class MyApp extends StatelessWidget {      // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      home: Scaffold(        backgroundColor: Colors.green[100],        body: Center(          child: MaterialButton(            onPressed: () {},            child: Text(              'Pick and open file',              style: TextStyle(color: Colors.white),            ),            color: Colors.green,          ),        ),      ),    );  }}
Run the below command in the terminal to add the file_picker package:
flutter pub add file_picker
and to add the open_file package run this command:
flutter pub add open_file
To use file_picker and open_file packages import them by adding the below line in your lib/main.dart :
Dart
import 'package:file_picker/file_picker.dart';import 'package:open_file/open_file.dart';
Dart
void _pickFile() async {    // opens storage to pick files and the picked file or files    // are assigned into result and if no file is chosen result is null.    // you can also toggle "allowMultiple" true or false depending on your need    final result = await FilePicker.platform.pickFiles(allowMultiple: false);      // if no file is picked    if (result == null) return;      // we will log the name, size and path of the    // first picked file (if multiple are selected)    print(result.files.first.name);    print(result.files.first.size);    print(result.files.first.path);  }
In the _pickFile function we are using the FilePicker object from the pick_files package to pick the file and then we await and the FilePickerResult type data which is returned is then saved to the result variable and if no file is picked then result variable is assigned a null value. You can also toggle allowMultiple true or false depending on whether you want to pick single or multiple files. After that, if result is null or no file is picked we terminate the function. If the files are picked we just log the name, size, and path of the first file.
Then to get things rolling we call the _pickFIle function in onPressed callback of the material button. After all that our lib/main.dart looks likes this:
Dart
import 'package:file_picker/file_picker.dart';import 'package:open_file/open_file.dart';import 'package:flutter/material.dart';  void main() {  runApp(MyApp());}  class MyApp extends StatelessWidget {  void _pickFile() async {          // opens storage to pick files and the picked file or files    // are assigned into result and if no file is chosen result is null.    // you can also toggle "allowMultiple" true or false depending on your need    final result = await FilePicker.platform.pickFiles(allowMultiple: false);      // if no file is picked    if (result == null) return;      // we will log the name, size and path of the    // first picked file (if multiple are selected)    print(result.files.first.name);    print(result.files.first.size);    print(result.files.first.path);  }    @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      home: Scaffold(        backgroundColor: Colors.green[100],        body: Center(          child: MaterialButton(            onPressed: () {              _pickFile();            },            child: Text(              'Pick and open file',              style: TextStyle(color: Colors.white),            ),            color: Colors.green,          ),        ),      ),    );  }}
Output:
Now since we have got the functionality to pick files from storage, let’s move on to opening the picked files in native apps. To do so we create a function called _openFile that takes a PlatformFile type parameter and opens that file:
Dart
void _openFile(PlatformFile file) {    OpenFile.open(file.path);  }
Now in the _pickFile function instead of logging the picked file name, let’s call the _openFile function and pass it the first file from the result object.
Dart
void _pickFile() async {    // opens storage to pick files and the picked file or files    // are assigned into result and if no file is chosen result is null.    // you can also toggle "allowMultiple" true or false depending on your need    final result = await FilePicker.platform.pickFiles(allowMultiple: true);      // if no file is picked    if (result == null) return;      // we get the file from result object    final file = result.files.first;      _openFile(file);  }
Now after all this our lib/main.dart looks like this:
Dart
import 'package:file_picker/file_picker.dart';import 'package:open_file/open_file.dart';import 'package:flutter/material.dart';  void main() {  runApp(MyApp());}  class MyApp extends StatelessWidget {  void _pickFile() async {          // opens storage to pick files and the picked file or files    // are assigned into result and if no file is chosen result is null.    // you can also toggle "allowMultiple" true or false depending on your need    final result = await FilePicker.platform.pickFiles(allowMultiple: true);      // if no file is picked    if (result == null) return;      // we get the file from result object    final file = result.files.first;      _openFile(file);  }    void _openFile(PlatformFile file) {    OpenFile.open(file.path);  }    @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      home: Scaffold(        backgroundColor: Colors.green[100],        body: Center(          child: MaterialButton(            onPressed: () {              _pickFile();            },            child: Text(              'Pick and open file',              style: TextStyle(color: Colors.white),            ),            color: Colors.green,          ),        ),      ),    );  }}
Output:
adnanirshad158
android
Flutter
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.