Logo

K-Learn

Learn Flutter Step by Step

Posted on

< Previous

ImagePickerPlus is a Flutter package that provides image selection and capture functionality in your Flutter application. It allows users to pick images from their device's gallery or capture new images using the camera.

Add the following line to your pubspec.yaml file:

dependencies:
  image_picker_plus: ^0.5.5+3

Next, you'll need to import the package into your Dart file:

import 'package:image_picker_plus/image_picker_plus.dart';

To pick an image from the gallery, you can use the pickImage method:

ImagePickerPlus picker = ImagePickerPlus(context);


SelectedImagesDetails? details = await picker.pickImage(source: ImageSource.camera);

The above code,

This will open the device's gallery, allowing the user to select an image. Once an image is selected, the pickedFile variable will contain information about the selected image, including the file path.

To capture a new image using the camera, you can use the below method:

ImagePickerPlus picker = ImagePickerPlus(context);
SelectedImagesDetails? details = await picker.pickImage(source: ImageSource.camera);

This will open the device's camera, allowing the user to take a new photo. Once the photo is taken, the pickedFile variable will contain information about the captured image, including the file path.

ImagePickerPlus also provides options for customizing the image selection and capture process. For example, you can set the maximum height and width of the selected/captured image using the maxHeight and maxWidth parameters.

Example Complete Code

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker_plus/image_picker_plus.dart';
class ImagePicker extends StatefulWidget {
  const ImagePicker({super.key});

  @override
  State createState() => _ImagePickerState();
}
class _ImagePickerState extends State {
  late SelectedByte _imageFile;

  bool imageSelected = false;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          imageSelected  ? Image.file(_imageFile.selectedFile)
			   : const Text('No Image Selected.'),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () async {
              ImagePickerPlus picker = ImagePickerPlus(context);   
	SelectedImagesDetails? details = await picker.pickImage(
                  source: ImageSource.gallery, multiImages: true);
              if (details != ) {
                setState(() {
                  _imageFile = details.selectedFiles[0];
                   imageSelected = true;
                  //print(_imageFile);
                });
              }
            },
            child: const Text('Select Image'),
          ),
          const SizedBox(height: 10),
          ElevatedButton(
            onPressed: () async {
              ImagePickerPlus picker = ImagePickerPlus(context);
             SelectedImagesDetails? details = await picker.pickImage(
                  source: ImageSource.camera, multiImages: false);
              if (details != ) {
                setState(() {
                  _imageFile = details.selectedFiles[0];
                  imageSelected = true;
                });
              }
            },
            child: const Text('Take Picture'),
          ),
        ],
      ),
    );
  }
}

In this example,

The ImagePicker widget displays an Image widget that shows the selected image, or a message if “No Image Selected”. The user can select an image from the device's gallery or capture a new image using the camera by pressing the corresponding buttons.

The _pickImage method is called when the user presses one of the buttons. It uses the ImagePicker class from the ImagePickerPlus package to pick an image from the specified source. The selected image is then displayed in the Image widget using the _imageFile variable.

Note that the ImagePicker class also provides methods for specifying image quality, file format, and other options. These can be used to customize the image selection and capture process further.

 

< Previous