How To Easily Pick Video In Flutter [Camera/Gallery]

In this tutorial, we’ll learn how to properly pick video in Flutter using practical Flutter code examples.

After reading this post, you’ll have a detailed practical knowledge of how to pick video in Flutter from camera or gallery.

Introduction: Pick Video In Flutter

It specifies recording the video using phone camera or importing it from gallery. We’ll go through both these methods. We’ll also play the recorded video in our app so we can make sure its successfully imported.

Implementing Pick Video In Flutter (Step By Step)

Follow below steps in order to properly pick video in Flutter.

Step 1: Import Image Picker Package

First we’ve to import image picker package in our pubspec.yaml file. Click here if you want to learn how to import it. Do visit this post, I am sure it’ll be beneficial for you. We prefer image picker package with this version.

image_picker: ^0.7.5+1

After its imported, just write the below statement in that specific screen where you want to specify the code to fetch video from camera/gallery.

import 'package:image_picker/image_picker.dart';

Step 2: Import Video Player Package

This package is used to play video after its captured from camera or gallery. Click here if you want to learn in detail how to import this package and play/pause video. Given below is the version we’re using for this project.

video_player: ^2.4.7

 ImagePicker videoPicker = ImagePicker();
  File? videoFile;

  getVideoFromCamera() async {
    final source = await videoPicker.getVideo(source: ImageSource.camera);
    videoFile = File(source!.path);
    Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => PlayVideo(data: videoFile!)));
  }

 late VideoPlayerController _controller;

  // it'll initialize the video player controller with the video data
  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.file(widget.data)
      ..initialize().then((_) {
        _controller.play();
        setState(() {});
      });
  }

  // always dispose the controller
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

_controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : CircularProgressIndicator()

Run it in your code and test it in your device. Above image shows a video playing but we just took a screenshot of it.

The complete source code will be provided in the end so you can go through it as well. Specifying the complete code here will just increase bulkiness.

Step 3: Pick Video From Gallery

The process is same for picking video from gallery. We just need to change the source to gallery. See below code:

final source = await videoPicker.getVideo(source: ImageSource.gallery);

Do give it a try and ask if you still have any questions regarding how to pick video in Flutter. We’ll be delighted to answer all your questions.

Click here if you want to learn how to control video (play and pause).

Below section includes the complete source code in which pick video in Flutter from both sources(camera and gallery) is implemented.

Pick Video In Flutter Complete Source Code (Camera and Gallery)

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.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 StatefulWidget {
  const Homepage({Key? key}) : super(key: key);
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  ImagePicker videoPicker = ImagePicker();
  File? videoFile;

  // pick video in flutter from camera
  getVideoFromCamera() async {
    final source = await videoPicker.getVideo(source: ImageSource.camera);
    videoFile = File(source!.path);
    Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => PlayVideo(data: videoFile!)));
  }

  // pick video in flutter from gallery
  getVideoFromGallery() async {
    final source = await videoPicker.getVideo(source: ImageSource.gallery);
    videoFile = File(source!.path);
    Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => PlayVideo(data: videoFile!)));
  }
 
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

          // button to pick video in Flutter from camera
          MaterialButton(
            onPressed: getVideoFromCamera,
            textColor: Colors.white,
            color: Colors.blue,
            child: Text('Pick Video From Camera'),
          ),
          SizedBox(
            height: 20,
          ),
          
          // button to pick video in Flutter from gallery
          MaterialButton(
            onPressed: getVideoFromGallery,
            textColor: Colors.white,
            color: Colors.blue,
            child: Text('Pick Video From Gallery'),
          ),
        ],
      ),
    )));
  }
}

class PlayVideo extends StatefulWidget {
  final File data;
  const PlayVideo({Key? key, required this.data}) : super(key: key);
  @override
  State<PlayVideo> createState() => _PlayVideoState();
}
class _PlayVideoState extends State<PlayVideo> {

  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.file(widget.data)
      ..initialize().then((_) {
        _controller.play();
        setState(() {});
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : CircularProgressIndicator(),
      ),
    );
  }
}