Open In App

Flutter – Pick and Open Files From Storage

Improve
Improve
Like Article
Like
Save
Share
Report

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.

1. Create an App:

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.

2. Create a basic UI:

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


Output:

3. Now add the packages:

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

4. Import the packages:

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';


5. Create a function to pick files  from storage:

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:

6. Create a function to open the picked file:

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:



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