CoderUni
CoderUni

Reputation: 6164

Use Multi Image Picker with Image Cropper

I am using the Multi_Image_Picker plugin to get multiple images. Multi_Image_Picker returns a List<Asset> files when selecting multiple images. How would I be able to use Multi_Image_Picker along with Image_Cropper which only accepts the path to the image? I couldn't get the path of the image since its an Asset type. Here is what I've tried in order to achieve it:

I could get the path of the image:

final filePath = await FlutterAbsolutePath.getAbsolutePath(assets.identifier);

This works but then flutter_absolute_path plugin requires the minimum android sdk to be 19. Is there another to crop images without converting the Asset File into an Image File?

I tried converting the Asset to Image File:

List<File> images = List<File>();
Directory tempDir = await getTemporaryDirectory();
final path =tempDir.path;
for (int i = 0; i < assets.length; i++) {
   images.add(await ProcessImage.assetToFile(
     path: "$path/images/img$i",
      data: await assets[i].getByteData(quality: 90)));
}

assetToFile():

static Future<File> assetToFile({ByteData data, String path})async {
return File(path).writeAsBytes(
      data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes));
}

Upvotes: 1

Views: 2934

Answers (2)

Khaled Rostampour
Khaled Rostampour

Reputation: 125

You can find a good example of a combination of three packages in below Github repository:

  • multi_image_picker
  • image_cropper
  • photofilters

https://github.com/flutterstudygn/multiple_image_selector

Key features

  • Pick multiple images.
  • Take a picture in the grid view.
  • Restrict the maximum count of images the user can pick.
  • Adjust cropping for each image.
  • Adjust filter for each image.

Upvotes: 1

CoderUni
CoderUni

Reputation: 6164

Thanks to @pskink for the answer. It turns out that you have to save the obtained asset byte data to a temporary folder as a file and use it in your cropper.

final temp = await Directory.systemTemp.createTemp();
List<File> images = List<File>();
 for (int i = 0; i < assets.length; i++) {
    final data = await assets[i].getByteData();
    images.add(await File('${temp.path}/img$i').writeAsBytes(
      data.buffer.asUint8List(
        data.offsetInBytes, data.lengthInBytes)));
}

Upvotes: 4

Related Questions