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
dependencies: flutter:
sdk: flutter
cupertino_icons: ^1.0.2
image_picker: ^0.8.6+1
|
Step 3: Create variable for image picker and file
File? videoFile; final picker = ImagePicker(); |
Step 4: Use the below code in the main.dart file
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.