[Question] How to access the state of the sticker editor

[thanglq1]

Hi @hm21 . If the sticker layout is always visible, as shown in this UI, how can we access the state of the sticker editor, similar to this? editorKey.currentState.stickerEditor.currentState.setLayer(sticker);

[hm21]

Hey @thanglq1

It's not possible to access the state of stickerEditor if you disable it in the image editor configs because the editor is then not rendered, so there is no state. However, if you want to add a layer “sticker” to the editor from outside, you can do it like below:

StickerLayerData layer = StickerLayerData(sticker: myWidget);
layer.offset = Offset(
  MediaQuery.of(context).size.width / 2,
  MediaQuery.of(context).size.height / 2,
);

editorKey.currentState!.addLayer(layer);

I set the initial offset to the center of the screen, but you can change it to any position you want.

[thanglq1]

Hi @hm21 . Thank you, it's working now. I have one more question: is there any way to configure the offset for the entire ProImageEditor? In my case, as you can see in the photo above, the image editor doesn't occupy the full height of the device screen. It's only 2/3 of the screen height. However, the ProImageEditor currently always places emojis, text, etc., at the center of the device screen. I need it to be centered within the space of the ProImageEditor, not the center of the device screen.

[hm21]

The editor will insert new layers in the middle of the rendered image, it doesn't matter if the editor is only half the size of the screen, the rendered image will also be smaller, so the editor will still insert it in the middle. Looking at your image, it looks to me like you are using the example where the background is moving. In this case, we insert a fake image that must be the same size as the full editor content. Below is an example from the part you need to edit if you use the code from the example.

/// The size from the content below the editor
double contentBelowSize = 300;
Size editorSize = Size(
      width - MediaQuery.of(context).padding.horizontal,
      height - contentBelowSize - kToolbarHeight - kBottomNavigationBarHeight - MediaQuery.of(context).padding.vertical,
    );

await _createTransparentImage(editorSize.aspectRatio);

Anyway, in the new version 2.7.1, I also added an option where users can set the position where new layers should be added, if you still want to set your own position.

configs: ProImageEditorConfigs(
    layerInteraction: LayerInteraction(
      newLayerOffsetPosition: Offset(
        100,
        100,
      ),
    ),
),

[thanglq1]

Hi @hm21. You are right. I'm using the example where the background is moving. Thank you again and have a great day.