Blog / Flutter Apps

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

February 25, 2021 · 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);
  }

  @override
  Widget 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)),
                        );
                      }),
                ),
        ],
      ),
    );
  }
}