[Question] How to get the cropper's width?

[tamasregenye]

I need to cover the cropping area in both the main editor and the Crop-Rotate-Editor with a custom widget.

Although I can retrieve the width of the image in the main editor, this doesn't help, as the image is scaled to fit the area based on its height rather than its width. As a result, I end up with different values when the image is tall versus when it is wide.

I wanted to solve the problem by adding padding to a Container equal to half of the screen width minus the image width in the main editor.

The question is: Is there a way to get the width of the image cropper? Or, how would you solve this issue?
It would also be great to disable scaling to fit the height in the main editor (since I need to cover that same area as well).

That’s what I’d like to achieve with all kinds of images, while also ensuring the exact same area is covered in the main editor.

It doesn’t seem to be accurate with a tall image:

I need to cover the same area. (Right now, it’s not working because I’ve set the container’s padding to zero)

**Here is my code: **

            cropRotateEditor: CustomWidgetsCropRotateEditor(
              bodyItems: (editor, rebuildStreams) {
                double padding = 0;
                final imageWidth = _editor.currentState?.cropRotateEditor.currentState?.mainImageSize?.width;
                final screenWidth = MediaQuery.of(context).size.width;
                if (imageWidth != null) {
                  padding = (screenWidth - imageWidth) / 2;
                  if (padding <= 0) padding = 20;
                }
                return [
                  ReactiveCustomWidget(
                    stream: rebuildStreams,
                    builder: (_) => _innerCropEditorBodyItems(aspectRatio, padding),
                  )
                ];
              },
            ),
            mainEditor: CustomWidgetsMainEditor(
              bodyItems: (editor, rebuildStreams) {
                return [
                  ReactiveCustomWidget(
                    stream: rebuildStreams,
                    builder: (_) => _innerCropEditorBodyItems(aspectRatio, 0),
                  )
                ];
              },
            ),
          ),

Widget _innerCropEditorBodyItems(double aspectRatio, double padding) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Padding(
          padding: EdgeInsets.all(padding),
          child: AspectRatio(
            aspectRatio: aspectRatio,
            child: IgnorePointer(child: LayoutBuilder(
              builder: (context, constraints) {
                final parentWidth = constraints.maxWidth;
                final parentHeight = constraints.maxHeight;
                return Container(
                  width: parentWidth,
                  height: parentHeight,
                  color: Colors.red.withOpacity(0.5),
                );
              },
            )),
          ),
        )
      ],
    );
  }

[hm21]

The problem you're encountering is that the editor image automatically adjusts its size based on the aspect ratio of the image and the editor, functioning similarly to BoxFit.contain. To solve this, you need to calculate the aspect ratio of the editor's body size and compare it to the aspect ratio of the image itself. Based on this comparison, you should implement logic that adapts depending on either the width (like you have) or the height, as appropriate.

Currently, disabling the scale in the crop editor is not possible, and the editor always applies a padding of 20 around the image.

Out of curiosity, what is the reason you want to display the crop area directly in the main editor?

[tamasregenye]

I need to implement a small frame that appears exactly along the sides of the cropping area. I could easily achieve this if I could cover the cropping area with the right container at first.