Flutter File Picker | Pick Images ,Video, Audio, Docs etc.| FilePicker Example

Hello Guys, Welcome to Codes With Sunny. In this flutter tutorial article, will explore how to pick files(images,video,audio, docs etc.) in flutter app.

A package that allows you to use the native file(images,video,audio) explorer to pick single or multiple files at times.

Flutter File Picker

File Picker

This package is very easily to use to pick file(images,video,audio) from native file explorer, it allows you to use file explorer of native platform to pick files , if support single & multiple file picking & also extension filtering is supported in selecting files in this app.

Feature of file_picker

• Uses OS default native pickers.
• Developer can list type of extension a user can pick Eg: jpg, png, web, jpeg etc.
• Single and multiple file picks easily possible.
• File types filtering (Audio,Image,Video, All type).
• Picked directories.

Step 1: Add the Dependency to pubspec.yaml file as shown below:

 dependencies:
  file_picker: ^4.1.6

Step 2: Import the library

Now in your Dart code, you can use:

import 'package:file_picker/file_picker.dart';

Pick Single File :

 FilePickerResult? results = await FilePicker.platform.pickFiles();
 if (results != null) {
 File files = File(results.files.single.path);
 } else {
}

Pick Multiple files :

 FilePickerResult? results = await FilePicker.platform.pickFiles(allowMultiple: true);
 if (results != null) {
  List files = result.paths.map((path) => File(path)).toList();
 } else {
}

Multiple files with extension filter :

 FilePickerResult? results = await FilePicker.platform.pickFiles(
   type: FileType.custom,
   allowedExtensions: ['jpg', 'png', pdf', 'doc'],
 );

Get Full Details of picked file in flutter :

 fileDetails(PlatformFile file) {
    final kb = file.size / 1024;
    final mb = kb / 1024;
    final size = (mb >= 1)
        ? '${mb.toStringAsFixed(2)} MB'
        : '${kb.toStringAsFixed(2)} KB';
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('File Name : ${file.name}'),
          Text('File Size : $size'),
          Text('File Extension : ${file.extension}'),
          Text('File Path : ${file.path}'),
        ],
      ),
    );
  }

Note: I am using OpenFile package to open the user selected or      picked file

OpenFile

A plugin that can call native APP to open files with string result in flutter app, support iOS(DocumentInteraction) / android(intent) / PC(ffi) / web(dart:html) etc.

Step 1: Add the Dependency to pubspec.yaml file as shown below:

 dependencies:
  open_file: ^3.2.1

Step 2: Import the library Now in your Dart code, you can use:

import 'package:open_file/open_file.dart';

Snippet Code

 void viewFile(PlatformFile file) {
    OpenFile.open(file.path);
  }

Complete Source Code :-

filepicked.dart

import 'dart:io';
 
import 'package:bottom/FileList.dart';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:open_file/open_file.dart';
 
void main() {
  runApp(const FilePicked());
}
 
class FilePicked extends StatelessWidget {
  const FilePicked({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'File Pick Demo',
      theme: ThemeData(brightness: Brightness.dark),
      home: const MyHomePage(),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State {
  String fileTypes = 'All';
  var fileTypeLists = ['All', 'Images', 'Videos', 'Audios', 'MultipleFiles'];
 
  FilePickerResult? result;
  PlatformFile? file;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("File Pick Demo"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'Choose Files :  ',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                DropdownButton(
                  value: fileTypes,
                  items: fileTypeLists.map((String type) {
                    return DropdownMenuItem(
                        value: type,
                        child: Text(
                          type,
                          style: TextStyle(fontSize: 20),
                        ));
                  }).toList(),
                  onChanged: (String? value) {
                    setState(() {
                      fileTypes = value!;
                      file = null;
                    });
                  },
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            ElevatedButton.icon(
 
              label: Text(
                'Pick File',
                style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.w900,
                    fontSize: 18),
              ),
              style: ElevatedButton.styleFrom(
                padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                primary: Colors.cyan,
                onPrimary: Colors.white,
                shape: const BeveledRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(4))),
              ),
              onPressed: () async {
                pickFiles(fileTypes);
              },
              icon: Image.asset("assets/images/ff.jpg",cacheHeight: 25,),
            ),
            if (file != null) fileDetails(file!),
            if (file != null) ElevatedButton.icon(
                label: Text(
                  'View Choose File',
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w900,
                      fontSize: 18),
                ),
 
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                  primary: Colors.cyan,
                  onPrimary: Colors.white,
                  shape: const BeveledRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(4))),
                ),
                onPressed: () {
                  viewFile(file!);
                },
                icon: Image.asset("assets/images/view.png",cacheHeight: 25,),
              ),
 
          ],
        ),
      ),
    );
  }
 
  Widget fileDetails(PlatformFile file) {
    final kb = file.size / 1024;
    final mb = kb / 1024;
    final size = (mb >= 1)
        ? '${mb.toStringAsFixed(2)} MB'
        : '${kb.toStringAsFixed(2)} KB';
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('File Name : ${file.name}'),
          Text('File Size : $size'),
          Text('File Extension : ${file.extension}'),
          Text('File Path : ${file.path}'),
        ],
      ),
    );
  }
 
  void pickFiles(String? filetype) async {
    switch (filetype) {
      case 'Images':
        result = await FilePicker.platform.pickFiles(type: FileType.image);
        if (result == null) return;
        file = result!.files.first;
        setState(() {});
        break;
      case 'Videos':
        result = await FilePicker.platform.pickFiles(type: FileType.video);
        if (result == null) return;
        file = result!.files.first;
        setState(() {});
        break;
 
      case 'Audios':
        result = await FilePicker.platform.pickFiles(type: FileType.audio);
        if (result == null) return;
        file = result!.files.first;
        setState(() {});
        break;
      case 'All':
        result = await FilePicker.platform.pickFiles();
        if (result == null) return;
        file = result!.files.first;
        setState(() {});
        break;
      case 'MultipleFiles':
        result = await FilePicker.platform.pickFiles(allowMultiple: true);
        if (result == null) return;
        loadSelectedFiles(result!.files);
        break;
    }
  }
 
  void loadSelectedFiles(List files) {
    Navigator.of(context).push(MaterialPageRoute(
        builder: (context) =>
            SelectFileList(files: files, onOpenedFiles: viewFile)));
  }
 
  void viewFile(PlatformFile file) {
    OpenFile.open(file.path);
  }
}

filelists.dart

import 'dart:io';
 
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
 
class SelectFileList extends StatefulWidget {
  final List files;
  final ValueChanged onOpenedFiles;
 
  const SelectFileList({Key? key, required this.files, required this.onOpenedFiles})
      : super(key: key);
 
  @override
  _SelectFileListState createState() => _SelectFileListState();
}
 
class _SelectFileListState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Choose Files'),
      ),
      body: ListView.builder(
          itemCount: widget.files.length,
          itemBuilder: (context, index) {
            final file = widget.files[index];
 
            return buildFile(file);
          }),
    );
  }
 
  Widget buildFile(PlatformFile file) {
    final kb = file.size / 1024;
    final mb = kb / 1024;
    final size = (mb >= 1)
        ? '${mb.toStringAsFixed(2)} MB'
        : '${kb.toStringAsFixed(2)} KB';
    return InkWell(
      onTap: () => widget.onOpenedFiles(file),
      child: ListTile(
        leading: (file.extension == 'jpg' || file.extension == 'png')
            ? Image.file(
          File(file.path.toString()),
          width: 80,
          height: 80,
        )
            : Container(
          width: 80,
          height: 80,
        ),
        title: Text('${file.name}'),
        subtitle: Text('${file.extension}'),
        trailing: Text(
          '$size',
          style: TextStyle(fontWeight: FontWeight.w700),
        ),
      ),
    );
  }
}

OUTPUT

Flutter File Picker

Flutter File Picker

Flutter File Picker