[Bug]: Sticker Not Saved in Image When Navigating to Edit Screen Without Interaction

[Pratik-1620]

Package Version

5.3.0

Flutter Version

3.24.2

Platforms

Android, iOS

How to reproduce?

Thank you for the excellent package! I've integrated it into my project but encountered the following issue:

1. I open the Editor View with a predefined white image (always the same image to create an empty canvas effect).
2. A sticker is added programmatically as soon as the editor opens (inside the initState method). The code is shown below.

imageEditorController.editorKey.currentState?.addLayer(StickerLayerData(
      sticker: Sticker(
        imageBytes: imageBytes,
      )
));

3. Everything works perfectly when interacting with the sticker (e.g., moving or resizing). The image, along with the sticker, is saved correctly when the "done" button is pressed.
4. However, if I open the editor, add the sticker programmatically, and press the "done" button without interacting with the sticker, the saved image only shows the white background, and the sticker is missing.

Expected Behavior: When the user navigates to the editor screen with a pre-added sticker and saves without any interaction (e.g., moving or resizing the sticker), the sticker should still be included in the saved image.

Please refer below images for your reference:

1. Open Editor with Sticker

2. Working fine after moving or resizing

3. Not working

[hm21]

Mostly the reason is that people add the sticker before the editor is completely initialized which will make problem to capture the sticker in the background task correctly. Can you post your code from your editor so that I can check what exactly the problem is and what you need to change.

[github-actions[bot]]

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

[github-actions[bot]]

This issue was closed because it has been inactive for 5 days since being marked as stale.

[Thesergiolg99]

This a current problem, i insert the image as a layer on the onAfterViewInit, as i pass the image as parameter to the widget, and if i made no modifications i only get the background color i made, no image layer appearing, but if a make some movements or editing the layer image is there.

Code:

 mainEditorCallbacks: MainEditorCallbacks(
    onAfterViewInit: () async {
      if (widget.isReupload) {
        // Add the image layer only after the editor is fully initialized
        await _addImageLayer(widget.reuploadPath,
            isNetworkImage: true);
      } else {
        // Add the image layer for newly uploaded images
        await _addImageLayer(widget.image!.bytes!);
      }
    },
  ),

Function called:

Future<void> _addImageLayer(dynamic imageSource, {bool isNetworkImage = false}) async {
  if (editorKey.currentState != null) {
    // Ensure the editor is initialized and no duplicate layers are added
    if (editorKey.currentState!.activeLayers.isEmpty) {
      editorKey.currentState!.addLayer(
        StickerLayerData(
          offset: Offset.zero,
          scale: _initScale,
          sticker: GestureDetector(
            onTap: () {
              // Open the text editor when the image layer is tapped
              editorKey.currentState!.openTextEditor();
            },
            child: isNetworkImage
                ? Image.network(
                    imageSource,
                    width: _editorSize.width,
                    height: _editorSize.height,
                    fit: BoxFit.contain,
                  )
                : Image.memory(
                    imageSource,
                    width: _editorSize.width,
                    height: _editorSize.height,
                    fit: BoxFit.contain,
                  ),
          ),
        ),
      );
    }
  }
}

[hm21]

Your implementation of onAfterViewInit appears to be correct. However, it appears that you haven't pre-cached the image, which is essential for ensuring that the editor can properly capture it. I recommend updating your _addImageLayer method like below:

  Future<void> _addImageLayer(
    dynamic imageSource, {
    bool isNetworkImage = false,
  }) async {
    if (editorKey.currentState != null) {
      // Ensure the editor is initialized and no duplicate layers are added
      if (editorKey.currentState!.activeLayers.isEmpty) {
        /// Precache the image
        await precacheImage(
          isNetworkImage ? NetworkImage(imageSource) : MemoryImage(imageSource),
          context,
          size: _editorSize,
        );

        editorKey.currentState!.addLayer(
          StickerLayerData(
            offset: Offset.zero,
            scale: _initScale,
            sticker: GestureDetector(
              onTap: () {
                // Open the text editor when the image layer is tapped
                editorKey.currentState!.openTextEditor();
              },
              child: isNetworkImage
                  ? Image.network(
                      imageSource,
                      width: _editorSize.width,
                      height: _editorSize.height,
                      fit: BoxFit.contain,
                    )
                  : Image.memory(
                      imageSource,
                      width: _editorSize.width,
                      height: _editorSize.height,
                      fit: BoxFit.contain,
                    ),
            ),
          ),
        );
      }
    }
  }

You can also check out this example which does exactly what you need.

[Thesergiolg99]

It worked, thank you so much for your help!.