[Bug]: White space appears when cropping a photo with the crop editor

[yangheecho]

Package Version

12.0.0

Flutter Version

3.35.2

Platforms

Android

How to reproduce?

I first encountered this issue in version 11.14.1.
Back then, setting customPixelRatio to 3.0 seemed to fix it.

After updating to version 12.0.0, the white space issue started happening again when cropping a photo with the crop editor.

Is there any other possible cause for this issue?

Logs (optional)

Example code (optional)

imageGeneration: const ImageGenerationConfigs(
                maxOutputSize: Size.square(1024),
                customPixelRatio: 3.0,
                enableBackgroundGeneration: false,
                processorConfigs: ProcessorConfigs(
                  processorMode: ProcessorMode.minimum,
                ),
                enableUseOriginalBytes: true,
              ),

Device Model (optional)

Samsung Galaxy S25

[hm21]

I wasn’t able to reproduce the issue. Could you share a minimal example and the image you’re using so I can try to reproduce it?

[yangheecho]

return CropRotateEditor.memory(
          result.bytes,
          initConfigs: CropRotateEditorInitConfigs(
            theme: ThemeData.dark(),
            convertToUint8List: true,
            callbacks: ProImageEditorCallbacks(
              onImageEditingComplete: (editedBytes) async {
                // 결과 파일 저장 (기존 로직 유지)
                String imageFilenameWithoutExtension =
                    widget.imageFile.path.split('/').last.split('.').first;
                String imageExtension =
                    widget.imageFile.path.split('.').last; // 입력 확장자 유지

                final saveDir = await getApplicationDocumentsDirectory();
                final timestamp = DateTime.now().millisecondsSinceEpoch;
                final editedFile = await File(
                  '${saveDir.path}/${imageFilenameWithoutExtension}_edited_$timestamp.$imageExtension',
                ).create();

                await editedFile.writeAsBytes(editedBytes);

                // 프로필 모드일 때 후처리 (정사각/사이즈 제한)
                if (widget.profileMode) {
                  final origin = imgpkg.decodeImage(editedBytes);
                  if (origin != null) {
                    if (origin.width > 1000 || origin.height > 1000) {
                      final resized = imgpkg.copyResize(
                        origin,
                        width: 1000,
                        height: 1000,
                      );
                      await editedFile.writeAsBytes(imgpkg.encodeJpg(resized));
                    } else if (origin.width != origin.height) {
                      final size = origin.width > origin.height
                          ? origin.height
                          : origin.width;
                      final resized = imgpkg.copyResize(
                        origin,
                        width: size,
                        height: size,
                      );
                      await editedFile.writeAsBytes(imgpkg.encodeJpg(resized));
                    } else {
                      await editedFile.writeAsBytes(editedBytes);
                    }
                  } else {
                    // 디코딩 실패시 원본 바이트로 폴백
                    await editedFile.writeAsBytes(editedBytes);
                  }
                } else {
                  await editedFile.writeAsBytes(editedBytes);
                }

                widget.onTapConfirm(editedFile);
                if (context.mounted) context.router.popForced();
              },
            ),
            configs: ProImageEditorConfigs(
              designMode: platformDesignMode,
              imageGeneration: const ImageGenerationConfigs(
                maxOutputSize: Size.square(1024),
                customPixelRatio: 3.0,
                enableBackgroundGeneration: false,
                processorConfigs: ProcessorConfigs(
                  processorMode: ProcessorMode.minimum,
                ),
                enableUseOriginalBytes: true,
              ),
              cropRotateEditor: CropRotateEditorConfigs(
                initAspectRatio: widget.aspectRatio,
                tools: const [], // 크롭/회전 전용
                safeArea: const EditorSafeArea(
                  top: false,
                  left: false,
                  right: false,
                  bottom: false,
                ),
                style: const CropRotateEditorStyle(
                  background: Colors.black,
                  cropCornerColor: Colors.white,
                  cropCornerThickness: 5,
                  helperLineColor: Colors.white,
                ),
                widgets: CropRotateEditorWidgets(
                  appBar: (editor, rebuildStream) => ReactiveAppbar(
                    builder: (context) => AppBar(
                      backgroundColor: Colors.black.withValues(alpha: 0.8),
                      leading: IconButton(
                        onPressed: () {
                          _editorKey.currentState?.isPopScopeDisabled = true;
                          editor.close();
                        },
                        icon: SvgPicture.asset("assets/icons/ic_back.svg"),
                      ),
                      actions: [
                        GestureDetector(
                          behavior: HitTestBehavior.translucent,
                          onTap: () {
                            editor.done();
                          },
                          child: const Padding(
                            padding: EdgeInsets.all(12.0),
                            child: Text(
                              "완료",
                              style: TextStyle(
                                fontFamily: 'NanumSquareNeo',
                                fontSize: 15,
                                height: 17 / 15,
                                fontWeight: FontWeight.w800,
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(
                          width: 4,
                        ),
                      ],
                    ),
                    stream: rebuildStream,
                  ),
                ),
              ),
              i18n: const I18n(
                importStateHistoryMsg: "에디터 로드중",
                doneLoadingMsg: "사진 처리중",
              ),
              dialogConfigs: DialogConfigs(
                widgets: DialogWidgets(
                  // 에디터 내부 작업(저장/렌더) 중 로딩 다이얼로그
                  loadingDialog: (message, configs) {
                    return Stack(
                      alignment: Alignment.center,
                      children: [
                        const Positioned.fill(
                          child: AbsorbPointer(
                            absorbing: true,
                            child: ColoredBox(color: Colors.transparent),
                          ),
                        ),
                        ProgressDialog(message: message),
                      ],
                    );
                  },
                ),
              ),
            ),
          ),
        );

This issue occurs when cropping the image shown above and appears on Samsung Galaxy S25. I used CropRotateEditor.memory, and I’ve attached the code below for reference.

[hm21]

Thanks for sharing the example and image. Unfortunately, when I copy and paste your example, it includes a lot of custom logic like widget.onTapConfirm, so I can’t directly use it for testing.

However, looking at your code, I see that after generating the final image, you call imgpkg.copyResize, which I assume comes from the image package. If that step is done incorrectly, it could cause exactly the issue you’re seeing. We can easily verify this by quickly adjusting that callback and checking the resulting image, as shown below.

onImageEditingComplete: (editedBytes) async {
  await Navigator.push(
    context,
    MaterialPageRoute(
      builder: (_) => Scaffold(
        backgroundColor: Colors.blue,
        appBar: AppBar(),
        body: Center(
          child: Image.memory(editedBytes),
        ),
      ),
    ),
  );
},

[yangheecho]

This also occurs even when both the image width and height are below 1000.
The issue is still present even when I display the cropped image directly without any further processing.
In version 11.14.1, it also occurred more frequently on other Samsung Galaxy S series devices.
If I remove the customPixelRatio option, the white space becomes even larger.
Is there anything else I should check on my side?

[hm21]

For now, the most helpful thing would be a very simple example that doesn’t depend on any of your custom logic, which I can copy and paste to reproduce the issue.

[github-actions]

This issue is stale because it has been open for 3 days with no activity.