Prevent user from deleting specific layer in the editor

[SukhVilash1]

Package Version

10.5.1

Flutter Version

3.34.0

Platforms

Android

How to reproduce?

I'm using the editor in my app, and I need to make sure the main baby photo added to the canvas cannot be deleted by the user. Currently, all layers are deletable, but I want to prevent deletion of this specific layer. If there's already a way to lock or protect a layer from being removed, please let me know how to implement it. If not, I’d appreciate any guidance or workaround to achieve this behavior.

babyPhoto.mp4

Logs (optional)

Example code (optional)

editorKey1.currentState?.addLayer(
            WidgetLayer(
              offset: Offset(editorSize.width * posX, editorSize.height * posY),
              scale: 1,
              interaction: LayerInteraction(
                enableEdit: enableInteraction,
                enableMove: enableInteraction,
                enableRotate: enableInteraction,
                enableScale: enableInteraction,
                enableSelection: enableInteraction,
              ),
              widget: IgnorePointer(
                ignoring: !enableInteraction,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.file(file, fit: BoxFit.cover),
                ),
              ),
            ),
          );

Device Model (optional)

No response

[hm21]

In that case, you’ll need to create your own remove area like this:

configs: ProImageEditorConfigs(
    mainEditor: MainEditorConfigs(
      widgets: MainEditorWidgets(
        removeLayerArea: (removeAreaKey, editor, rebuildStream) {
          int selectedLayerIndex = editor.selectedLayerIndex;
          Layer activeLayer = editor.activeLayers[selectedLayerIndex];

          if (activeLayer.meta?['disableDelete'] == true) {
            return const SizedBox.shrink();
          }

          return Positioned(
            key: removeAreaKey,
            top: 0,
            left: 0,
            child: SafeArea(
              bottom: false,
              child: StreamBuilder(
                stream: rebuildStream,
                builder: (context, snapshot) {
                  return Container(
                    height: kToolbarHeight,
                    width: kToolbarHeight,
                    decoration: BoxDecoration(
                      color: editor.layerInteractionManager.hoverRemoveBtn
                          ? Colors.red
                          : Colors.white,
                      borderRadius: const BorderRadius.only(
                        bottomRight: Radius.circular(100),
                      ),
                    ),
                    padding: const EdgeInsets.only(right: 12, bottom: 7),
                    child: const Center(
                      child: Icon(
                        Icons.delete_outline,
                        size: 28,
                      ),
                    ),
                  );
                },
              ),
            ),
          );
        },
      ),
    ),
  ),

After that, you can update your WidgetLayer like this: WidgetLayer(meta: {'disableDelete': true})

FYI that's actually a question, not a bug, so I'll move that post to the Discuss tab now.

[SukhVilash1]

Thank you so much for the clarification and detailed example!
I implemented the removeLayerArea as you suggested and added meta: {'disableDelete': true} to the WidgetLayer, and it's now working perfectly — the delete option is disabled for that specific layer just as I needed.

Appreciate the quick support, this solves my issue completely. 😊