Flutter Resize ImagePicker Image before uploading to firebase - flutter

Question

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

Answer 1

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.

Answer 2

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,
),
);