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.