79136913

Date: 2024-10-29 11:04:55
Score: 0.5
Natty:
Report link

Include image_picker dependency in pub.dev

Code to get multiple images,

class ImagePickerUtil {
   static final ImagePicker _picker = ImagePicker();

   static Future<List<File>> getImages() async {
     final pickedFiles = await _picker.pickMultiImage(imageQuality: 100);
     if (pickedFiles != null && pickedFiles.isNotEmpty) {
       return pickedFiles.map((xFile) => File(xFile.path)).toList();
     }
     return [];
   }
}

Call this like,

GestureDetector(
  onTap: () async {
    selectedImages = await ImagePickerUtil.getImages();
    widget.selectedImageCallback?.call(selectedImages);
  },
child: yourWidgetWhichHasToCallMultipleImage,

Note if you are using web use Image.network, to get the image for Android or iOS, Image.file will work

if (selectedPhotos.isEmpty)
              UploadPhotosContainer(
                selectedImageCallback: (selectedImages) {
                  selectedPhotos = selectedImages;
                  setState(() {});
                },
              )
            else
              GridView.builder(
                shrinkWrap: true,
                itemCount: selectedPhotos.length + 1,
                gridDelegate:
                    const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 4),
                itemBuilder: (BuildContext context, int index) {
                  if (index == selectedPhotos.length) {
                    return Column(
                      children: [
                        GestureDetector(
                          onTap: () async {
                            List<File> newImages =
                                await ImagePickerUtil.getImages();
                            selectedPhotos.addAll(newImages);
                            setState(() {});
                          },
                          child: Container(
                            height: 80,
                            width: 80,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(10),
                                border: Border.all(
                                  color: AppColors.yellowColor,
                                )),
                            padding: const EdgeInsets.only(
                                // right: 10,
                                // bottom: 10,
                                ),
                            child: const Icon(
                              CupertinoIcons.add,
                              color: AppColors.yellowColor,
                            ),
                          ),
                        ),
                      ],
                    );
                  } else {
                    return Stack(
                      clipBehavior: Clip.none,
                      children: [
                        Container(
                            height: 100,
                            width: 100,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                            ),
                            padding: const EdgeInsets.only(
                              right: 10,
                              bottom: 10,
                            ),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(10),
                              child: Image.file(
                                selectedPhotos[index],
                                height: 100,
                                width: 100,
                                fit: BoxFit.cover,
                              ),
                            )),
                        Positioned(
                          right: 2,
                          top: -7,
                          child: GestureDetector(
                            onTap: () {
                              setState(() {
                                selectedPhotos.removeAt(index);
                              });
                            },
                            child: const Icon(
                              CupertinoIcons.clear_circled,
                              color: AppColors.redColor,
                              size: 20,
                            ),
                          ),
                        )
                      ],
                    );
                  }
                },
              ),

This code will initially show a container, on whose tap we can get multiple images, once we got it, you can show them, here I have added + container to append the images if user wants to add other images also.Cross Icon will remove the image.

NOTE: I have used callBack cause UPloadContainer is in another file.

Here is the output.

Initial Screen Output after selecting multiple images Appending more image Removing some image

Reasons:
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Priyanshi Pandya