Flutter Resize ImagePicker Image before uploading to firebase

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

score 1 · Accepted Answer · answered Oct 24 '20 at 17:51

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.

answered Oct 24 '20 at 17:51

Thomas

2,375
2
17
32

Thanks, that works! For anyone trying this approach: if you want to generate the same access token as the original check this post: https://stackoverflow.com/questions/59072882/cloud-functions-resized-images-not-loading – user1032620 Oct 25 '20 at 13:28

score 1 · Answer 2 · answered Oct 24 '20 at 18:28

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

Flutter Resize ImagePicker Image before uploading to firebase

2 Answers2