Open In App

How to Select Video from Camera and Gallery in Flutter?

Improve
Improve
Like Article
Like
Save
Share
Report

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.


Last Updated : 23 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads