I'm trying to pick multiple images at once using the image_picker 0.7.5+3 package
so my code is simple , just one line to open the gallery to select from it
final images = await ImagePicker.platform.pickMultiImage();
but it's showing this error
enter image description here
i tried running flutter clean and deleting the app from emulator and retarting everything but it's the same problem,
note : using final images = await ImagePicker().getImage(source: ImageSource.gallery); it allows me to choose an image without any problems
final result = await ImagePicker().pickMultiImage(
imageQuality: 70,
maxWidth: 1440,
);
This should work as usual. If you are testing on android emulator and the default file manager, you have to long press the first image to multi-select.
Try a long click on one image, then it will let you pick multiple images.
I can't find anything in their API reference for pickMultiImage. I don't think it exists, unfortunately. There's a package called images_picker, maybe that helps you.
Related
I am using image_picker plugin to pick images and videos but in the plugin example you must select that you want to pick image or video from gallery . So is there is another way to show both together in one place ?
final ImagePicker _picker = ImagePicker();
// Pick an image
final XFile? image = await _picker.pickImage(source:
ImageSource.gallery);
// Pick a video
final XFile? image = await _picker.pickVideo(source:
ImageSource.gallery);
You are dependent on the plugin and its capabilities that you use. If it does not provide what you need, either you need to develop your plugin or try to use another one. If this plugin is changeable for you, please take a look following solutions:
1- wechat_assets_picker:
final List<AssetEntity>? assets = await AssetPicker.pickAssets(
context,
maxAssets: 2,
requestType: RequestType.all,
pickerTheme: appTheme,
textDelegate: EnglishTextDelegate(),
);
It provides different RequestType like audio, video, common, image, and all.
2- photo_manager:
final assetPathEntityList =
await PhotoManager.getAssetPathList(type: RequestType.all);
This plugin provides different RequestType like audio, video, common, image, and all too. The difference is there is no UI widget. Therefore you need to develop your UI and connect with this plugin.
If you have further questions, please don't hesitate to write in the comments.
You can do one thing, If you need to use image_picker then you can do following,
Give pin icon widget where you want to access media.
Show dialog on it which says, either select video or image.
Handle your methods accordingly.
I have a problem using image_picker on flutter in real device with android. When i open gallery using ImageSource.gallery the first screen is "Recent pictures", i can select any picture and everything fine, but if i open the gallery i see "Lost device connection" message and white screen.
_procesImage(ImageSource image) async {
final ImagePicker picker = ImagePicker();
file = await picker.pickImage(source: image);
setState(() {});
}
I beleive you're having trouble with iOS as you're talking about gallery but could you give more detail ? Is it happening on emulator or real device?
I would suggest you to doublecheck iOS specific authorizations in plist, also check if you're asking for storage permission before opening the gallery.
I had that kind of issue month ago but my library wasn't up to date and I guess updating it fixed the issue
Try to define methods like these and specifically point out from which location you want to access the image. Currently, it is not specified.
final ImagePicker imagePicker = ImagePicker();
_imgFromCamera() async {
final image = await imagePicker.pickImage(
source: ImageSource.camera);
// the further functionality here
sendImageToServer(image);
}
_imgFromGallery() async {
final image = await imagePicker.pickImage(
source: ImageSource.gallery);
// the further functionality here
sendImageToServer(image);
}
I'm new in flutter.
Hope my issue below will be same your issue in the past. And you can help me for this:
My situation is:
My app will capture an photo (using package camera: ^0.5.8+2). Then, this photo will be saved on gallery of user device (using package gallery_saver: ^2.0.1). Finally, I will open the gallery (using package photo_manager: ^0.5.7) to pick some photos which I captured before ==> This flow is really clear and simple, right? ^_^
But, I have already trap at this issue:
After I captured an photo, then open the gallery from my app, I can't see this photo (Althought I can see this photo on device gallery). I also print the log on console to make sure that: my recently photo was got by my app. But, I still see nothing, it's mean my app also can't read this recently photo.
So, what do I wrong? Or what am I missing? Everyone who have experience about this issue help me, pls!
Below is my source code:
This is function to take photo by using camera package (https://pub.dev/packages/camera)
/// Take an photo
_takePhoto() async {
try {
if (_numberPhotoTaken < widget.maxTaken) {
/// Path
var file = "${DateTime.now().toString()}.jpg";
var temporaryDir = (await getTemporaryDirectory()).path;
var pathSaved = join(temporaryDir, file);
/// Take photo
await _cameraController.takePicture(pathSaved);
/// save to gallery
GallerySaver.saveImage(pathSaved, albumName: galleryFolder).then((ok) {
if (ok) {
setState(() => _numberPhotoTaken++);
}
/// remove temporary file
File(pathSaved).delete();
});
} else {
AppDialog.inform(
this.context,
textLocale("Reached the maximum number of photos", this.context),
() {});
}
} on CameraException catch (e) {
} on Exception catch (ex) {
}
}
This is function to load asset from gallery by using photo manager package (https://pub.dev/packages/photo_manager)
/// fetching gallery's asset
/// return: list of asset entity in specific page
Future<List<GalleryEntity>> _fetchGalleryPaging() async {
/// load all assets in one album list
List<AssetPathEntity> albums = await PhotoManager.getAssetPathList(
onlyAll: true, type: RequestType.common);
List<AssetEntity> page = await albums[0].getAssetListPaged(_currentPage, widget.perPage);
/// return gallery entity list
return page.map<GalleryEntity>((e) => GalleryEntity(asset: e)).toList();
}
I'm currently test on my android device
When I open gallery on device, I wonder: the new photo which I have just captured not be arranged right (the newest photo must be at the end of gallery). After a few time (I'm not sure how many time), device gallery will auto refresh, and my recently photo will be arranged in the right way (it's at the end of gallery). And my app will read this photo perfectly (so strange for me)
UPDATE: one more thing, my photo will be saved into a separated folder in gallery
If you read till this line. I'm so appreciate about that. And I hope among of you have experience to solve this issue
Thanks all guys,
After a few time I made searching about my issue. I find out the main problem is the external storage was not rescan when I did an capturing photo, so my flutter app can not be display the new photo on gallery.
The solution for this issue is the package:
https://github.com/hui-z/image_gallery_saver
I'm not sure about the effective of this package, but for my scene, it's work as perfect as I wish.
Hope this help for anyone who also face same issue like me
Thanks all
I tried using the https://pub.dartlang.org/packages/share plugin to share an image on my flutter app to other app like Whatsapp, Facebook and so on. But rather it sending the file name of the image(images/female/ankara/ank5.jpg) in my android project to the other application rather than the actually image.
How can make it send the actual image.
Hero(
tag: widget.imageList,
child: PhotoView(
imageProvider: AssetImage(widget.imageList),
)
);
final RenderBox box = context.findRenderObject();
Share.share(widget.imageList,
sharePositionOrigin:
box.localToGlobal(Offset.zero) &
box.size);
I excepted to send the actual image to the other app rather it in a string format.
As mentioned in the previous comment, you can follow the answer on this Stack Overflow post for sharing images from a Flutter app. As for selecting a different image, you can use storage path provider plugins like ext_storage or image_picker.
I tried to display an image from a local file, so I try to do this
<Image
source={{uri:'../../assets/img_src/BTI.jpg'}}
style={{height:150,width:150}}
/>
my container component seems getting the height and the width but the image doesn't load. So I try this
<Image
source={require('../../assets/img_src/BTI.jpg')}
style={{height:150,width:150}}
/>
It works really well, unfortunately as far as I know I can't use this implementation if i want to manipulate the address file first and store it to a variable.
Example:
const imgSrc = `../../assets/${data.image}`;
where the data.image = 'img_src/BTI.jpg'.
I try to delete all the data on my android simulator in the android studio but the result is still the same. Am I doing something wrong? Is there a better implementation for this?
Thanks a lot :)
Not being able to require() a dynamic path is an intended behaviour of React Native, the packager needs to know paths in advance - see React Native issues
We had this problem in our project, we were storing image URLs on our DB and wanted to concat strings in the app to get the path to the locally stored image. As you've discovered, this doesn't work. You might find our workaround useful.
In our /images folder, we created a new images.js file which simply exported an object whose keys mapped to all our local image paths like so
export const Images = {
image1: require('./image1.png'),
image2: require('./image2.png'),
image3: require('./image3.png'),
};
Now the packager knew all the paths in advance and was happy. Then we added an imageKey to the DB item and used this rather than the absolute path. To grab an image we simply did
import { Images } from '../images/images';
// get your image key e.g. passed down through props
const img = Images[imageKey];
...
render() {
...
<Image source={img} />
...
}
Might not fit your exact use case, but hopefully you might be able to make some use of it.