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.