Ambibuzz Technologies LLP - Picking images and videos from gallery and camera
In this blog I will be showing you how to Pick multiple images and videos from gallery and also pick image and video from camera
·
3 min read
Picking Images and Videos from Gallery and Camera
Package Used
image_pickers
Version
^1.0.8+7
Picking Multiple Images from Gallery
This function is used to pick multiple images from gallery and we need to clear lists so that when we pick images the old files get cleared and only new files will be added to list.
Future<void> pickImagesFromGallery() async {_imageFiles.clear();_listImagePaths.clear();_videoFiles.clear();_listVideoPaths.clear();_listImagePaths = await ImagePickers.pickerPaths(galleryMode: GalleryMode.image,selectCount: 5,showGif: false,showCamera: true,compressSize: 500,uiConfig: UIConfig(uiThemeColor: Color(0xffff0f50)),cropConfig: CropConfig(enableCrop: false, width: 2, height: 1));_listImagePaths.forEach((image) {_imageFiles.add(File(image.path));});print(_listImagePaths.length);print(_imageFiles.length);setState(() {});}
Picking Multiple Videos from Gallery
This function is used to pick multiple videos from gallery and we need to clear lists so that when we pick videos the old files get cleared and only new files will be added to list.
Future<void> pickVideosFromGallery() async {_imageFiles.clear();_listImagePaths.clear();_videoFiles.clear();_listVideoPaths.clear();_listVideoPaths = await ImagePickers.pickerPaths(galleryMode: GalleryMode.video,selectCount: 5,);_listVideoPaths.forEach((video) {_videoFiles.add(File(video.path));});print(_listVideoPaths.length);print(_videoFiles.length);_videoFiles.forEach((file) {print(file.readAsBytes().then((value) => value.lengthInBytes));});setState(() {});}
Picking Image from Camera
This function is used to pick image from camera and we need to clear lists so that when we pick image the old files get cleared and only new files will be added to list.
void pickImageFromCamera() {_imageFiles.clear();_listImagePaths.clear();_videoFiles.clear();_listVideoPaths.clear();ImagePickers.openCamera().then((Media media) {_listImagePaths.add(media);setState(() {});});_listImagePaths.forEach((image) {_imageFiles.add(File(image.path));setState(() {});});print(_listImagePaths.length);print(_imageFiles.length);}
Picking Video from Camera
This function is used to pick video from camera and we need to clear lists so that when we pick video the old files get cleared and only new files will be added to list.
void pickVideoFromCamera() {_imageFiles.clear();_listImagePaths.clear();_videoFiles.clear();_listVideoPaths.clear();ImagePickers.openCamera(cameraMimeType: CameraMimeType.video).then((media) {_listVideoPaths.add(media);setState(() {});});_listVideoPaths.forEach((video) {_videoFiles.add(File(video.path));setState(() {});});print(_listVideoPaths.length);print(_videoFiles.length);}
UI for using these functions
Column(children: [RaisedButton(onPressed: pickImagesFromGallery,child: Text('Pick Images from Gallery'),color: Theme.of(context).primaryColor,),RaisedButton(onPressed: pickVideosFromGallery,child: Text('Select Videos from Gallery'),color: Theme.of(context).primaryColor,),RaisedButton(onPressed: pickImageFromCamera,child: Text('Pick Image from Camera'),color: Theme.of(context).primaryColor,),RaisedButton(onPressed: pickVideoFromCamera,child: Text('Select Video from Camera'),color: Theme.of(context).primaryColor,),],),
UI for displaying picked images and videos
For displaying picked videos
_listVideoPaths == null? Container(): SizedBox(height: 100,child: ListView.builder(shrinkWrap: true,scrollDirection: Axis.horizontal,itemCount:_listVideoPaths == null ? 0 : _listVideoPaths.length,itemBuilder: (context, index) {return GestureDetector(onTap: () {ImagePickers.previewVideo(_listVideoPaths[index].path);},child: Image.file(File(_listVideoPaths[index].thumbPath)),);}),),
For displaying picked images
_listImagePaths == null? Container(): SizedBox(height: 100,child: ListView.builder(shrinkWrap: true,scrollDirection: Axis.horizontal,itemCount:_listImagePaths == null ? 0 : _listImagePaths.length,itemBuilder: (context, index) {return GestureDetector(onTap: () {ImagePickers.previewImage(_listImagePaths[index].path);},child: Image.file(File(_listImagePaths[index].thumbPath)),);}),),
Whole Code
import 'dart:io';import 'package:flutter/material.dart';import 'package:image_pickers/image_pickers.dart';class PickImageAndVideo extends StatefulWidget {@override_PickImageAndVideoState createState() => _PickImageAndVideoState();}class _PickImageAndVideoState extends State<PickImageAndVideo> {List<File> _imageFiles = [];List<File> _videoFiles = [];List<Media> _listVideoPaths = [];List<Media> _listImagePaths = [];Future<void> pickImagesFromGallery() async {_imageFiles.clear();_listImagePaths.clear();_videoFiles.clear();_listVideoPaths.clear();_listImagePaths = await ImagePickers.pickerPaths(galleryMode: GalleryMode.image,selectCount: 5,showGif: false,showCamera: true,compressSize: 500,uiConfig: UIConfig(uiThemeColor: Color(0xffff0f50)),cropConfig: CropConfig(enableCrop: false, width: 2, height: 1));_listImagePaths.forEach((image) {_imageFiles.add(File(image.path));});print(_listImagePaths.length);print(_imageFiles.length);setState(() {});}Future<void> pickVideosFromGallery() async {_imageFiles.clear();_listImagePaths.clear();_videoFiles.clear();_listVideoPaths.clear();_listVideoPaths = await ImagePickers.pickerPaths(galleryMode: GalleryMode.video,selectCount: 5,);_listVideoPaths.forEach((video) {_videoFiles.add(File(video.path));});print(_listVideoPaths.length);print(_videoFiles.length);_videoFiles.forEach((file) {print(file.readAsBytes().then((value) => value.lengthInBytes));});setState(() {});}void pickImageFromCamera() {_imageFiles.clear();_listImagePaths.clear();_videoFiles.clear();_listVideoPaths.clear();ImagePickers.openCamera().then((Media media) {_listImagePaths.add(media);setState(() {});});_listImagePaths.forEach((image) {_imageFiles.add(File(image.path));setState(() {});});print(_listImagePaths.length);print(_imageFiles.length);}void pickVideoFromCamera() {_imageFiles.clear();_listImagePaths.clear();_videoFiles.clear();_listVideoPaths.clear();ImagePickers.openCamera(cameraMimeType: CameraMimeType.video).then((media) {_listVideoPaths.add(media);setState(() {});});_listVideoPaths.forEach((video) {_videoFiles.add(File(video.path));setState(() {});});print(_listVideoPaths.length);print(_videoFiles.length);}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Pick image and video'),),body: Column(crossAxisAlignment: CrossAxisAlignment.center,children: [Column(children: [RaisedButton(onPressed: pickImagesFromGallery,child: Text('Pick Images from Gallery'),color: Theme.of(context).primaryColor,),RaisedButton(onPressed: pickVideosFromGallery,child: Text('Select Videos from Gallery'),color: Theme.of(context).primaryColor,),RaisedButton(onPressed: pickImageFromCamera,child: Text('Pick Image from Camera'),color: Theme.of(context).primaryColor,),RaisedButton(onPressed: pickVideoFromCamera,child: Text('Select Video from Camera'),color: Theme.of(context).primaryColor,),],),_listVideoPaths == null? Container(): SizedBox(height: 100,child: ListView.builder(shrinkWrap: true,scrollDirection: Axis.horizontal,itemCount:_listVideoPaths == null ? 0 : _listVideoPaths.length,itemBuilder: (context, index) {return GestureDetector(onTap: () {ImagePickers.previewVideo(_listVideoPaths[index].path);},child: Image.file(File(_listVideoPaths[index].thumbPath)),);}),),_listImagePaths == null? Container(): SizedBox(height: 100,child: ListView.builder(shrinkWrap: true,scrollDirection: Axis.horizontal,itemCount:_listImagePaths == null ? 0 : _listImagePaths.length,itemBuilder: (context, index) {return GestureDetector(onTap: () {ImagePickers.previewImage(_listImagePaths[index].path);},child: Image.file(File(_listImagePaths[index].thumbPath)),);}),),],),);}}
MY
No comments yet. Login to start a new discussion Start a new discussion