Flutter Resize ImagePicker Image before uploading to firebase - flutter

I am building a demo wallpaper app using flutter where users can upload images to firebase. When loading those images I first want to load a small version of the image and only once the user clicks on the image, load the full version.
In order to achieve this I thought I would simply upload 2 versions in the background once a user picks the image. Now I am struggling with how to achieve this.
Here is how the user picks the image using ImagePicker into a file var.
Future pickImage() async {
var tempImage = await ImagePicker.pickImage(source: ImageSource.gallery, maxHeight: 2000);
print(tempImage.runtimeType);
setState(() {
inspirationimage = tempImage;
});
String result = await uploadImage();
}
As you can see the tempimage is the full size version. I would now have sth like this:
var smallImage = tempImage.resize(height: 200);
Obviously this does not work as tempImage is of type file. Any ideas how this is usually solved?
Thanks

Since you are using Firebase, you can use the Firebase "Resize Image" extension. If you want to do it on client side however, take a look at this answer.

Why don't you let your user crop the image by using this
image_cropper 1.3.1 plugin?
link : https://pub.dev/packages/image_cropper
Example
// File image = await ImagePicker.pickImage(source: source);
final _picker = ImagePicker();
PickedFile image = await _picker.getImage(source: source);
if (image != null) {
// Remove crop attribute if we don't want to resize the image
File cropped = await ImageCropper.cropImage(
sourcePath: image.path,
aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1),
compressQuality: 100, // 100 means no compression
maxWidth: 700,
maxHeight: 700,
compressFormat: ImageCompressFormat.jpg,
androidUiSettings: AndroidUiSettings(
toolbarColor: primaryColor,
toolbarTitle: "RPS Cropper",
statusBarColor: primaryColor,
backgroundColor: Colors.white,
//toolbarWidgetColor: primaryColor,
activeControlsWidgetColor: primaryColor,
//dimmedLayerColor: primaryColor,
cropFrameColor: primaryColor,
cropGridColor: primaryColor,
),
);

Related

The argument type 'File?' can't be assigned to the parameter type 'String?'. By trying to updatePhotoURL

This error accur while I was trying to do UserCredential;await auth.currentUser!.updatePhotoURL(image); I don’t know If I done anything wrong I can’t figure it out . So if you know help. Thanks
late File? image;
Upload image from gallery:
getFromGallery() async {
XFile? pickedFile = await ImagePicker().pickImage(
source: ImageSource.gallery,
maxWidth: 1800,
maxHeight: 1800,
);
if (pickedFile != null) {
setState(() {
image = File(pickedFile.path);
});
}
}
Here’s the function:
resetProfile(
File? image,
) async {
try {
UserCredential;
await auth.currentUser!.updatePhotoURL(image);
Button to called:
ElevatedButton(
onPressed: () => resetProfile(image),
style: ElevatedButton.styleFrom(
primary: Colors.grey,
onPrimary: Colors.black,
elevation: 0.0,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
),
),
child: const Text('Confirm'),
),
The error seems pretty clear: updatePhotoURL expects you to pass the URL of the image you want to set for the user, but you are trying to pass a File to it.
If you want to use the local for file the user, you'll first need to upload it somewhere, get a URL to that place, and then pass that URL to updatePhotoURL. One place you can upload such images would be into Cloud Storage through Firebase, as shown here: https://firebase.google.com/docs/storage/ios/upload-files
You are directly passing the file inside a String. Get the download URL of an image and pass it inside the updatePhotoImage URL. This will work.

Pick and resize image flow, how to implement it fluently

I need to provide a flow for the user to pick an image, resize it and store it.
I have the user profile picture with a InkWell and the following onTap method
var original = await ImagePicker().pickImage(source: ImageSource.gallery);
if (original == null) return;
File croppedFile = await ImageCropper().cropImage(
sourcePath: original.path,
aspectRatioPresets: [CropAspectRatioPreset.square],
androidUiSettings: AndroidUiSettings(
toolbarColor: Palette.primary,
lockAspectRatio: false),
iosUiSettings: IOSUiSettings(
minimumAspectRatio: 1.0,
));
if (croppedFile != null) upload(croppedFile);
This works fine. However the ImagePicker and the ImageResizer are two different plugins and two different flows. I need to await the first and then move to the second.
This creates a weird behaviour for the user. While moving from picker to resizer the screen goes back for few seconds to the main UserPage
How can I avoid that? How can I make these two plugins' flow fluently move one from each other without this small time-frame?
I guess this is due to the picker frame being removed from the stack and then the resizer one being added.

Why won't my image show up after picking from image_picker in Flutter?

I have been using image_picker: ^0.8.4+9 for the past couple of months with no problems. Today whenever I try to pick an image the gallery opens and I am able to pick an image, however once thats done the image doesn't appear on the screen. No errors and I update my github with it everyday and checked to see if something was changed but nothing was. I've tried using other versions only to have the same problem. I understand that this is an issue with M1 Macs sometimes, however why would it suddenly stop working using the same version? I have seen other questions similar like this. I have the correct permissions and there hasn't been a thing changed since it was last working. This could be a problem I cannot fix due to it being an iOS issue or something else but I wanted to see if anyone else is having this issue. Can't test on a physical device since I am on iOS beta but still it was working on the sim so that shouldn't matter.
Here is the basic function of getting am image and storing it:
File? pickedImage;
Future pickImage() async {
final _imagePicker = ImagePicker();
final pickedImage =
await _imagePicker.pickImage(source: ImageSource.gallery);
final imageTemp = File(pickedImage!.path);
setState(() => this.pickedImage = imageTemp);
}
Here is the button to initiate the gallery and pick the image:
ElevatedButton(
onPressed: () async {
final _imagePicker = ImagePicker();
final pickedImage = await _imagePicker.pickImage(
source: ImageSource.gallery);
final imageTemp = File(pickedImage!.path);
setState(() => this.pickedImage = imageTemp);
},
child: const Text('Add Image')),
const SizedBox(height: 20),
// The image should show here if not null else the 'No image' text
pickedImage != null
? Image.file(pickedImage!, height: 200, width: 200)
: Text('No Image'),
EDIT: As Vandad linked in the comment below, it seems this is a newer issue. Here is the discussion. github.com/flutter/flutter/issues/98569

Flutter show local image or asset

I build an user profile page where you may change the profile image. The default picture is in assets. The selected picture, either from gallery or camera, is stored localy. All this works fin. My code to display the profile picture looks like:
Container(
width: 140.0,
height: 140.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
image: new FileImage(File(_image.path)),
//image: new ExactAssetImage(_image.path),
fit: BoxFit.cover,
),
))
The FileImage shows the local image correctly. The ExactAssetImage shows the default asset image correctly. My question: how to check if local image exists and display it or use the default assset image?
Update:
I initialize my _image like:
File _image = File('assets/images/user_profile_static.png');
Once I have chosen the new image I save it localy using following code:
void _imgFromGallery() async {
final imageFile = await ImagePicker().getImage(source: ImageSource.gallery);
if (imageFile == null) return;
Directory directory = await getApplicationDocumentsDirectory();
File tmpFile = File(imageFile.path);
tmpFile = await tmpFile.copy('${directory.path}/my_profile.jpg');
setState(() {
_image = tmpFile;
});
}
So on next visit of the page, if my_profile.jpg exists, show it , else show default image.
I think this should work
Image(image: FileImage(image)??AssetImage(assetName),),

How to avoid app crash when picking a image with flutter and image_picker package? [duplicate]

This question already has answers here:
How to solve the image picker crash app error?
(6 answers)
Closed 3 years ago.
I'm building a application for taking photos and send them into firestore, i'm using image_picker :0.5.0+8 when I'm trying to pick a image from camera or from gallery the app crash. it open gallery very well or the camera very well but if a choose a picture the app crash.
this is my code:
File image_state; AppState state;
bool isLoading; bool isShowSticker; String _imageUrl;
Future getImage() async {
var tempImage = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
image_state = tempImage;
state = AppState.picked;
});
File croppedFile = await ImageCropper.cropImage(
sourcePath: image_state.path,
ratioX: 1.0,
ratioY: 1.0,
toolbarTitle: 'Cropper',
toolbarColor: Colors.blue,
);
if (croppedFile != null) {
image_state = croppedFile;
setState(() {
state = AppState.cropped;
});
} }
is there some one who work with this librairy? can you show me an example that work please?
issue
There are example of usages inside the plugin's repo.
It may be related to AndroidX compability. You have to avoid AndroidX or migrate your project to AndroidX.
There were a breaking change after version 0.5.0