How To Use Flutter File Picker [Easy Flutter Code Example]

In this tutorial, we’ll learn what Flutter file picker is and how to use it to pick image or video. We’ll go through a complete Flutter code example for better understanding.

Introduction: Flutter File Picker

It’s used to pick images of videos from same source. In our previous articles, we’ve learned how to use Flutter image picker. Image picker is bound to show only images or videos at a time. But when it comes to Flutter file picker, then we can see both images, videos and files of other format as well.

Let’s now jump into a Flutter code example where we’ll pick an image and a video.

Implementing Flutter File Picker (Step By Step)

Below steps will be used to properly use file picker in Flutter.

Step 1: Import Flutter File Picker Package

file_picker: ^5.2.2

First we’ve to import this package in our Flutter project’s pubspec.yaml file. Click here to get the latest version.

If you face any problem while building the project then give version 33 to your compile SDK version. See below:

compileSdkVersion 33

Path for this file is android – app – build.gradle.

After the package is imported, use the below statement in that file where you want to use Flutter file picker.

import 'package:file_picker/file_picker.dart';

We also need to import video player package in our pubspec.yaml file to play picked video. See below:

video_player: ^2.4.7

Click here to get the latest version.

Step 2: Function to Get Image/Video From Gallery

FilePickerResult? filePickerResult;
  File? pickedFile;

getImageorVideoFromGallery(context) async {
    filePickerResult = await FilePicker.platform.pickFiles();

    if (filePickerResult != null) {
      pickedFile = File(filePickerResult!.files.single.path.toString());
      Navigator.of(context).push(MaterialPageRoute(
          builder: (context) =>
              filePickerResult!.files.single.extension == 'mp4'
                  ? VideoBlock(file: pickedFile!)
                  : ImageBlock(
                      file: pickedFile!,
                    )));
    } else {
                // can perform some actions like notification etc
            }
  }

By calling this function, we can choose image/video from gallery. This function will check if the extension is mp4(means video) then it’ll navigate to a screen where code for playing the picked video is specified. If not, then it’ll navigate to a screen where the picked image will be shown. We’re sending the picked data to these screens using constructors.

You can specify other conditions for other video extensions as well. In our case, we’ve just specified mp4.

Step 3: Call the Function

MaterialButton(
            onPressed: () {
              getImageorVideoFromGallery(context);
            },
            color: Colors.purple,
            textColor: Colors.white,
            child: Text('Pick Image/Video'))

We’ve created a Flutter material button which is used to call the above specified function.

Step 4: Show the Selected Image/Video on Screen

Image.file(widget.file)   It will show image of screen(if image is picked)

VideoPlayer(videoPlayerController!)    It will show and play video

The complete code will be provided in the end. Click here if you want to learn how to properly use Flutter video player.

Step 5: Run the Experiment

Let’s now first try to pick an image and show it. After that, we’ll pick a video using the same source.

Pick Image

The picked image is shown successfully.

Pick Video

This is actually a video, we’ve taken a screenshot from the screen.

As we can see that Flutter file picker is working perfectly file. So this is how we can easily use Flutter file picker. There are other parameters of pick files as well like selecting multiple images/videos etc. Do give them a try in order to get more familiar with file picker.

Don’t hesitate to share it with your developer friends. Also, feel free to ask if you still have any queries regarding how to use Flutter file picker.

Below section has the complete source code in which Flutter file picker is implemented.

Flutter File Picker Implementation Source Code

import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  FilePickerResult? filePickerResult;
  File? pickedFile;

  getImageorVideoFromGallery(context) async {
    filePickerResult = await FilePicker.platform.pickFiles();
    if (filePickerResult != null) {
      pickedFile = File(filePickerResult!.files.single.path.toString());
      Navigator.of(context).push(MaterialPageRoute(
          builder: (context) =>
              filePickerResult!.files.single.extension == 'mp4'
                  ? VideoBlock(file: pickedFile!)
                  : ImageBlock(
                      file: pickedFile!,
                    )));
    } else {// perform some action etc}
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MaterialButton(
            onPressed: () {
              getImageorVideoFromGallery(context);
            },
            color: Colors.purple,
            textColor: Colors.white,
            child: Text('Pick Image/Video')),
      ),
    );
  }
}

////////// image screen /////////////

class ImageBlock extends StatefulWidget {
  final File file;
  const ImageBlock({Key? key, required this.file}) : super(key: key);
  @override
  State<ImageBlock> createState() => _ImageBlockState();
}
class _ImageBlockState extends State<ImageBlock> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(child: Image.file(widget.file)));
  }
}

////////// video screen ///////////

class VideoBlock extends StatefulWidget {
  final File file;
  const VideoBlock({Key? key, required this.file}) : super(key: key);
  @override
  State<VideoBlock> createState() => _VideoBlockState();
}
class _VideoBlockState extends State<VideoBlock> {
  VideoPlayerController? videoPlayerController;
  @override
  void initState() {
    videoPlayerController =
        VideoPlayerController.file(File(widget.file.path.toString()))
          ..initialize().then((_) {
            videoPlayerController!.play();
            setState(() {});
          });
    super.initState();
  }
  @override
  void dispose() {
    videoPlayerController!.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AspectRatio(
          aspectRatio: videoPlayerController!.value.aspectRatio,
          child: VideoPlayer(videoPlayerController!),
        ),
      ),
    );
  }
}

Conclusion

To conclude this tutorial, hope now you’ve a complete practical understanding of how to properly use Flutter file picker. We’ll be happy to have your valuable feedback on this tutorial.

We’d also love to see you visit our other tutorials on Flutter app development. Thank you for reading this post.