[Bug]: Black borders after transforms [reopen]

[efalco777]

Package Version

4.1.0

Flutter Version

3.22.2

Platforms

Android

How to reproduce?

Same issue as described here still occurs but doesn't reproduce every single time: https://github.com/hm21/pro_image_editor/issues/120

Steps:

1. Select any photo with 3060 x 4080 resolution (bug was reproduced in photos of this resolution)
2. Open editor
3. Crop the photo
4. Save the changes and export the history
5. Reopen editor with the history
6. Crop the photo again
7. Save the changes

Expected: Photo is cropped properly

Actual: Black borders show on the photo filling up to the original size of the image

This occurs 7 out of 10 times I've tested it using this reproduction scenario. I'm providing the reproduction video as well as the photo that the issue occured on & example:

2024-06-27_10h35_44 (video-converter.com).webm

Logs (optional)

No response

Example code (optional)

class _FileEditor extends StatefulWidget {
  const _FileEditor({
    required this.file,
  });

  final File file;

  @override
  State<_FileEditor> createState() => _FileEditorState();
}

class _FileEditorState extends State<_FileEditor> {
  late GlobalKey<ProImageEditorState> _key;
  String? _historyJson;

  Uint8List? _editedPhotoBytes;
  bool _showEditor = true;

  @override
  void initState() {
    super.initState();
    _key = GlobalKey<ProImageEditorState>();
  }

  @override
  Widget build(BuildContext context) {
    return switch (_showEditor) {
      true => ProImageEditor.file(
          widget.file,
          key: _key,
          callbacks: ProImageEditorCallbacks(
            onImageEditingComplete: onImageEditingComplete,
          ),
          configs: ProImageEditorConfigs(
            stickerEditorConfigs: StickerEditorConfigs(
              enabled: true,
              buildStickers: (setLayer, scrollController) {
                return SizedBox(
                  height: 200,
                  width: double.infinity,
                  child: ElevatedButton(
                    child: const Text('Create sticker'),
                    onPressed: () {
                      final sticker = Container(
                        color: Colors.red,
                        width: 50,
                        height: 50,
                      );
                      setLayer(sticker);
                    },
                  ),
                );
              },
            ),
            stateHistoryConfigs: StateHistoryConfigs(
              initStateHistory: _historyJson != null ? ImportStateHistory.fromJson(_historyJson!) : null,
            ),
          ),
        ),
      false => Scaffold(
          body: Column(
            children: [
              SizedBox(
                height: 400,
                child: Image.memory(_editedPhotoBytes!),
              ),
              const Divider(),
              ElevatedButton(
                onPressed: () => _openEditor(),
                child: const Text('Reopen editor with the history'),
              )
            ],
          ),
        ),
    };
  }

  Future<void> onImageEditingComplete(bytes) async {
    final exportState = await _key.currentState?.exportStateHistory();
    _closeEditor(await exportState?.toJson(), bytes);
  }

  void _closeEditor(String? historyJson, Uint8List? bytes) {
    setState(() {
      _showEditor = false;
      _historyJson = historyJson;
      _editedPhotoBytes = bytes;
    });
  }

  void _openEditor() {
    print('Reopening with: ' + (_historyJson?.toString() ?? 'empty'));
    setState(() {
      _key = GlobalKey<ProImageEditorState>();
      _showEditor = true;
    });
  }
}

Device Model

Samsung Galaxy A23 5G, Android 13

[hm21]

Thank you for reporting this issue with all these details and the video that will help me a lot to resolve this issue. However, I already tried several times the same as you describe and show in the video with the exact image resolution as you told me, but even I tried it now 10 times I can't reproduce it. Seems like this issue is a bit tricky, but I will try it again tmr.

For the case you have time, can you also try if you experience that issue also with any other platform like windows or web?

[hm21]

Okay, I found the problem, now I just have to try to fix it. Btw, you can also reproduce this issue by following the steps below:

1. Open the crop-rotate-editor
2. Rotate your image and confirm the changes
3. Open crop-rotate-editor again
4. This time, crop the image so that the aspect ratio will be different from the original
5. Confirm all changes and close the editor, it will show you the black borders

[hm21]

Okay, I think I found the issue which should be resolved in version 4.2.3. Please let me know if you still have this issue after the update.