Total width and height

[michaldev]

Hi. Can I set the total output width and height of my Image? I would like to get Image (example) in 800x800 size independent from the image inside. Too if the image inside is smaller than 800x800.

[xclud]

Hi @michaldev, You can set the aspect ratio to 1 (800 / 800 = 1) and then resize the output image to 800x800. Here is a good package for image resizing: https://pub.dev/packages/image

[michaldev]

No, I can't because If Image is 400x200 (expected 800x800) I would like set where the image in image should be, and user should choose - image resize, movement or resize and movement.

[xclud]

If the input aspect ratio is not equal to the desired output aspect ratio, it's user's job to choose where in the image to be selected.

[michaldev]

Yes, I know. But I would like positioning image in crop-viewport when Image is smaller than target and if I don't want scale it. Like this:

[xclud]

Did you try Image widget with fit: BoxFit.cover?

[michaldev]

Yes. Image always return to center. Independent from fit parameter.

[xclud]

How about putting the Image into a FittedBox?

[michaldev]

I’ve used your example.

[xclud]

Please try FittedBox and let me know.

[michaldev]

I've used that, but without effect.

https://vimeo.com/447069518

Code:

Crop(
                controller: controller,
                shape: shape,
                child: FittedBox(
                  child: Image.network(
                    'https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png',
                    fit: BoxFit.cover,
                  ),
                ), 
                foreground: IgnorePointer(
                  child: Container(
                    alignment: Alignment.bottomRight,
                    child: Text(
                      'Foreground Object',
                      style: TextStyle(color: Colors.red),
                    ),
                  ),
                ),
                helper: shape == CropShape.box
                    ? Container(
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.white, width: 2),
                        ),
                      )
                    : null,
              ),

[xclud]

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