[Question] Support for Adding Layers in ProImageEditor

[yaju1234]

Hi,
First of all, thank you for creating this great library! I am working on an application where I need to implement image editing with multiple layers. Specifically, I want to load an image using ProImageEditor.network and overlay it with additional layers like:

• Text with customizable font, color, and position.

• Images with specific positions and sizes.

Currently, I couldn't find a way to add layers directly in ProImageEditor.network. Does the library support adding layers, or is there a recommended way to handle this use case? If layers are not supported directly, are there plans to add this feature in the future? Or do you have any suggestions or workarounds for implementing it efficiently?

Thanks in advance for your help!

[hm21]

Yes, the editor supports adding layers manually. You can refer to examples such as movable_background_image, which demonstrates how to add layers. If you need to reorder layers, you can review this example.

The editor supports the following types of layers: TextLayerData, EmojiLayerData, PaintLayerData, and StickerLayerData.

FYI: I will move that question to the Discuss tab under Q&A since that tab is better suited for questions.

[yaju1234]

Hello,

Thank you for providing this fantastic package!

I noticed that the package currently includes classes like TextLayerData, EmojiLayerData, PaintLayerData, and StickerLayerData for adding specific types of layers. However, I couldn’t find an implementation for an ImageLayerData class to handle layers with images sourced from network URLs or raw byte data.

Could you please guide me on how to implement or extend this functionality to add an image layer using a network URL or byte data? Any help or pointers in this regard would be greatly appreciated.

Thank you in advance for your support!

[hm21]

If you want to add your own widgets, you can use the StickerLayerData as shown below:

 StickerLayerData(
    sticker: ClipRRect(
          borderRadius: BorderRadius.circular(7),
          child: Image.network(
            'https://picsum.photos/id/3/2000',
            width: 80,
            height: 80,
            fit: BoxFit.cover,
            loadingBuilder: (context, child, loadingProgress) {
              return AnimatedSwitcher(
                layoutBuilder: (currentChild, previousChildren) {
                  return SizedBox(
                    width: 80,
                    height: 80,
                    child: Stack(
                      fit: StackFit.expand,
                      alignment: Alignment.center,
                      children: <Widget>[
                        ...previousChildren,
                        if (currentChild != null) currentChild,
                      ],
                    ),
                  );
                },
                duration: const Duration(milliseconds: 200),
                child: loadingProgress == null
                    ? child
                    : Center(
                        child: CircularProgressIndicator(
                          value: loadingProgress.expectedTotalBytes != null
                              ? loadingProgress.cumulativeBytesLoaded /
                                  loadingProgress.expectedTotalBytes!
                              : null,
                        ),
                      ),
              );
            },
          ),
        ),
),