[Question] How to edit the delete option when dragging an emoji to delete it.

[AmanRajSinghMourya]

I am making a custom image editor using this package and I want to edit the default delete icon which appears on the top left corner of the editor.
I want it to be on the center of the screen and want to make something like this which comes on the bottom center of the screen so please guide me how to implement this. Thank you!!!

[hm21]

In that case, you can create your own widget and replace the default removeLayerArea with it, like this:

configs: ProImageEditorConfigs(
  mainEditor: MainEditorConfigs(
    widgets: MainEditorWidgets(
      removeLayerArea: (removeAreaKey, editor, rebuildStream) {
        return Align(
          alignment: Alignment.bottomCenter,
          child: StreamBuilder(
            stream: rebuildStream,
            builder: (_, __) {
              bool isHovered =
                  editor.layerInteractionManager.hoverRemoveBtn;
              double diameter = 56;

              return AnimatedContainer(
                key: removeAreaKey,
                duration: const Duration(milliseconds: 150),
                height: diameter,
                width: diameter,
                margin: const EdgeInsets.only(bottom: 24),
                decoration: BoxDecoration(
                  color: isHovered
                      ? const Color.fromARGB(255, 255, 197, 197)
                      : const Color.fromARGB(255, 255, 255, 255),
                  shape: BoxShape.circle,
                ),
                padding: const EdgeInsets.all(12),
                child: const Center(
                  child: Icon(
                    CupertinoIcons.delete,
                    size: 28,
                    color: Color(0xFFF44336),
                  ),
                ),
              );
            },
          ),
        );
      },
    ),
  ),
),

[AmanRajSinghMourya]

Thank you for the immediate response!! It worked perfectly

[AmanRajSinghMourya]

I want to ask one more question.
So I am using pro_image_editor: 8.2.0 version and it has option to toggle background but what I want is that I can tap on the background in want and set it to that as shown in the given image but the option available is toggle which apply the next background option and not the one use selected

So is there a way for this also ? Thank you!!

[hm21]

I'm not sure if it was in an older version where I made that value public so you could set it yourself, but in the newer version, you can do it like this and maybe also in version 8.2.0:

final mainEditor = editorKey.currentState!;
mainEditor.textEditor.currentState!
  ..backgroundColorMode = LayerBackgroundMode.background
  ..setState(() {});

Btw could you create a new question next time instead of adding it to an existing one. It doesn’t matter much to me, but it makes it easier for other users with similar questions to find the answer.