How to Select Video from Camera and Gallery in Flutter?

We can add video from the gallery as well as from the camera using the image_picker package in Flutter. For this, you’ll need to use your real device or web version. Follow the below steps to display the images from the gallery:

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the dependency to your pubspec.yaml file

Dart

dependencies:
 flutter:
   sdk: flutter

 cupertino_icons: ^1.0.2
 image_picker: ^0.8.6+1

Step 3: Create variable for image picker and file 

Dart

File? videoFile;
final picker = ImagePicker();

Step 4: Use the below code in the main.dart file

Dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.green),
      home: const VideoSelector(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class VideoSelector extends StatefulWidget {
  const VideoSelector({super.key});

  @override
  State<VideoSelector> createState() => _VideoSelectorState();
}

class _VideoSelectorState extends State<VideoSelector> {
  File? galleryFile;
  final picker = ImagePicker();
  @override
  Widget build(BuildContext context) {

    // display image selected from gallery
    return Scaffold(
      appBar: AppBar(
        title: const Text('Gallery and Camera Access'),
        backgroundColor: Colors.green,
        actions: const [],
      ),
      body: Builder(
        builder: (BuildContext context) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.green)),
                  child: const Text('Select video from Gallery and Camera'),
                  onPressed: () {
                    _showPicker(context: context);
                  },
                ),
                const SizedBox(
                  height: 20,
                ),
                SizedBox(
                  height: 200.0,
                  width: 300.0,
                  child: galleryFile == null
                      ? const Center(child: Text('Sorry nothing selected!!'))
                      : Center(child: Text(galleryFile!.path)),
                ),
                const Padding(
                  padding: EdgeInsets.symmetric(vertical: 18.0),
                  child: Text(
                    "GFG",
                    textScaleFactor: 3,
                    style: TextStyle(color: Colors.green),
                  ),
                )
              ],
            ),
          );
        },
      ),
    );
  }

  void _showPicker({
    required BuildContext context,
  }) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return SafeArea(
          child: Wrap(
            children: <Widget>[
              ListTile(
                leading: const Icon(Icons.photo_library),
                title: const Text('Gallery'),
                onTap: () {
                  getVideo(ImageSource.gallery);
                  Navigator.of(context).pop();
                },
              ),
              ListTile(
                leading: const Icon(Icons.photo_camera),
                title: const Text('Camera'),
                onTap: () {
                  getVideo(ImageSource.camera);
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        );
      },
    );
  }

  Future getVideo(
    ImageSource img,
  ) async {
    final pickedFile = await picker.pickVideo(
        source: img,
        preferredCameraDevice: CameraDevice.front,
        maxDuration: const Duration(minutes: 10));
    XFile? xfilePick = pickedFile;
    setState(
      () {
        if (xfilePick != null) {
          galleryFile = File(pickedFile!.path);
        } else {
          ScaffoldMessenger.of(context).showSnackBar(// is this context <<<
              const SnackBar(content: Text('Nothing is selected')));
        }
      },
    );
  }
}

Different Properties in pickVideo function

1. Source of video

It will take an enum as its value 

• Value: [ImageSource.camera, ImageSource.gallery]
• Example:  source: ImageSource.gallery

Note: Camera Source will not work in the web version. 

2. Which Camera device you want to choose front or rear?

It will also take enum like 

• Value:  [CameraDevice.front, CameraDevice.rear]
• Example: preferredCameraDevice: CameraDevice.front

3. Duration of max video selected

It will take duration  as a value 

Example: maxDuration: const Duration(minutes: 10));

For Android:

Add this permission to android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET"/>

For iOS:

Add the following keys to your Info.plist file, located in <project root>/ios/Runner/Info.plist:

NSPhotoLibraryUsageDescription
NSCameraUsageDescription
NSMicrophoneUsageDescription

Output:

When no video is selected, it will result:

When the button is pressed, it will ask for accessing photos, media, and files on your device as shown below:

When permission is given to access media and any videos are selected from the gallery or camera, its path will be displayed on the screen as shown below:

If you select the camera:

If you select the gallery:

Explanation:

• Import image_picker package in main.dart file.
• For selecting the source of video like gallery, camera use _showPicker function.
• After selecting, we have the async function getVideo() and that will open the gallery and camera as per your selection in _showPicker function.
• The Video path will be displayed after loaded.