Image is immediately cropped to aspect ratio

[Haidar-Hammoud]

Whenever I get the image and place it as the child of Crop, it is immediately cropped to the aspect ratio passed to the controller. How do i get the initial image to maintain its original aspect ratio while still cropping it to another aspect ratio in the crop view?

[Haidar-Hammoud]

I saw some of the closed requests and removing fit: BoxFit.fitWidth fixes this. The problem, as someone else mentioned, is that instead of auto centering and fitting the width, it will just have chunks of transparency on the sides to fit the aspect ratio. Hopefully you can get around to fixing this because that's definitely the only thing preventing me from using this.

[xclud]

@HAIDARCORP I didn't understand the problem. Can you attach a picture/video and write the steps to reproduce the problem ?

[LHDi]

I think the same issue is tracked in #27.

[xclud]

@LHDi Thanks for reporting. Still i am not able to reproduce this bug.

[LHDi]

@xclud I am going to walk you through one of the scenarios (The one that I have):
I want the user to be able to change his profile picture, So I have created a dialog Widget for that.
First thing first I want the profile picture to have an aspect ratio of 1:1 (squared).
The dialog that I've created allows the user to select the source of the photo (either The Gallery or The Camera) and then select the picture (from the gallery) or take one (with the camera).
After the image was picked I render it inside the Crop to enable the user to crop it (obviously).

The problem here is:

I am not guaranteed that the user is going to pick an image with 1:1 (in our case) aspect ratio
let's say that the user selected an image with an aspect ratio of 16:9 (landscape).
since the aspect ratios are not equal (1:1 for the Crop widget and 16:9 for the user's image) we have to fit the image inside the Crop Widget, and for this, there are two options.

1- use fit: BoxFit.cover:

"As small as possible while still covering the entire target box." Flutter documentation

as you can see when using the cover option we only render a part of the image inside the Crop widget and the other part (I'm gonna call it the overflow inspired by CSS ^_^) is gone you can't crop it in my case the user gets only the center square of his image.

So here we have a lost data (the Overflow is lost) we can overcome this problem by using the other option.

2- use fit: BoxFit.contain:

"As large as possible while still containing the source entirely within the target box." Flutter documentation

here all the image is visible but there are some undesired parts. so here there is an added data (the blank parts at the edges).
And the user can select those parts and crop them (we don't want that).

The desired behavior is between those two, No lost parts nor added parts only the image.

if this still not clear I can provide a code for it.

Great package by the way
Thank you!

[xclud]

@LHDi thank you for description. I'd appreciate if you provide a [not] working code for this. e.g. link to a github repo.

[vemarav]

@xclud Using portrait images leads to this problem. user cannot pan image. I have set 3.5/2.3 aspectRatio for controller.

orginal image	image in crop widget using Boxfit.cover

[xclud]

I close this issue for #27. Please feel free to continue this discussion there.