[Feature request] How I can add custom draggable and resizable shapes

[BhushanBadhe]

Platforms

Android

Description

Hi @hm21 bro,

I really liked the package you created. It's too much awesome. But I'm new to flutter hence I need your support to add this custom widget into my app. Could you please help me how I can achieve this?

I wanna create draggable and resizable shape of the link given below :

https://www.google.com/imgres?q=jesus%20logo%20shape%20svg&imgurl=https%3A%2F%2Fi.etsystatic.com%2F38501418%2Fr%2Fil%2F63fd7b%2F5948475219%2Fil_570xN.5948475219_dpi7.jpg&imgrefurl=https%3A%2F%2Fwww.etsy.com%2Flisting%2F1403322922%2Fcross-svg-christian-png-jesus-christ&docid=SfSfLX1q7KVGFM&tbnid=_SwmxhQkB-nJJM&vet=12ahUKEwiL8NSj7pGPAxWVwjgGHRwAOm0QM3oECBwQAA..i&w=570&h=570&hcb=2&ved=2ahUKEwiL8NSj7pGPAxWVwjgGHRwAOm0QM3oECBwQAA

Why

No response

[hm21]

Thanks, I’m glad you like my package.

I’m not sure I fully understood your point, but you just want to add an image to the editor like an emoji, right?
If so, you have two options:

1. You can use the optional "sticker" editor, which makes it easy to load multiple widgets directly into the editor. You can find an example here.
2. You can also add any widget programmatically into the editor. A basic example would look like this:

final imgUrl = 'Your-image-url';
final layer = WidgetLayer(
  widget: SizedBox(
    width: 200,
    // Can also be just a widget.
    child: Image.network('Your-image-url'),
  ),
);
precacheImage(NetworkImage(imgUrl), context);
editorKey.currentState!.addLayer(layer);

However, since you mentioned you're new to Flutter, let me know if the code example is too complicated for you. I’ll be happy to create a full example if needed.

FYI I’ll move this topic to the "Discussions" tab, since this section is meant for issues and feature requests. As it's more of a question, I think it fits better there.

[BhushanBadhe]

Hi @hm21,

Package version: 11.4.1
Use case:
I want to add a new custom shape tool (for example, a Cross/Jesus logo) that behaves exactly the same way as the built-in Circle or Rectangle tools.

Currently, when I select Circle or Rectangle in the paint editor, the editor inserts a resizable, draggable, and rotatable shape onto the canvas. I would like to achieve the same behavior, but with my own custom shape (SVG or path) instead of a default rectangle or circle.

Requested Features

1. Register a new drawing mode

Similar to PaintEditorMode.circle or PaintEditorMode.rect.

Example: PaintEditorMode.cross.

2. Define the shape path/widget

Allow passing an SVG path or a custom widget to be used as the shape.

The shape should support scaling, rotation, drag/move, selection, and deletion just like existing shapes.

3. Toolbar integration

Ability to add a new icon + label into the paint editor toolbar for the new custom shape tool.

Example: "Cross" with a cross icon.

When the user selects the Cross tool from the toolbar:

The editor places a new Cross shape on the canvas.

The Cross shape can be moved, resized, rotated, or deleted exactly like the default Circle/Rectangle tools.

[hm21]

That's not possible because PaintMode is a hardcoded enum, so you can't dynamically add your own shape.
However, adding a custom PaintMode yourself can be a bit tricky, so I created it quickly for you in the branch here that you can fork if you want to make modifications.

The icon in the bottom bar will need to be replaced with your own, since I just used a Material-Icon and cuz there's no cross icon available, it's currently a church icon. You can change it in the paintEditorConfigs using the icons property.

I also released a special version for you on pub.dev, so you can simply update your pubspec.yaml like this:
pro_image_editor: 11.0.0-cross