How can I add a border to the inner canvas/editor?

[edwarddubi]

Quick question. I have my initial transparent canvas set to 500x500, which takes up a bit of the device screen. I would like to add a border or something to help users know the boundary they can edit on. I have checked the editorTheme config and can't find anything to help me do this. Please advise if there is any way this can be done.

Thanks.

[hm21]

To help the user identify areas where they can edit the image, I overlay a transparent background that darkens the surrounding layers slightly. This overlay is placed in front of all other layers, and its opacity can be adjusted to control the strength of the effect, as shown below. However, I suggest not setting the opacity value to 1, as this would make it impossible for the user to see any layers positioned outside the image.

configs: ProImageEditorConfigs(
    imageEditorTheme: ImageEditorTheme(
      /// Default is 0.5
      outsideCaptureAreaLayerOpacity: 0.95,
      /// Change the color of the overlay below
      /// background:
    ),
),

For the case you require a complete transparent background as it is in the movable_background_image example, you need to wrap the editor inside CustomPaint and draw there a rect with the bounds of your image.

[edwarddubi]

Okay, and sorry I have been busy. I had already tried using the outsideCaptureAreaLayerOpacity prop and didn't give me what I was after.
but I'll try the custom paint to see if I can get what I need and I'll let you know if I succeed. Thanks for quick response.

[edwarddubi]

@hm21 I tried implementing the custom paint, but it did not work. followed the example code and didnt work. attached is the image of what I am getting vs what I actually want. thanks

[hm21]

Ah, got it you would like to mark an area on the image where the user should add text, rather than marking the image border, correct? If so, you can customize the editor configurations by adding customWidgets, as shown in the example below.

configs: ProImageEditorConfigs(
    designMode: platformDesignMode,
    customWidgets: ImageEditorCustomWidgets(
      mainEditor: CustomWidgetsMainEditor(
        bodyItems: (editor, rebuildStream) {
          return [
            ReactiveCustomWidget(
              stream: rebuildStream,
              builder: (_) => Center(
                child: Container(
                  width: MediaQuery.of(context).size.width * 0.7,
                  height: MediaQuery.of(context).size.height * 0.7,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.red,
                      width: 2,
                    ),
                  ),
                ),
              ),
            ),
          ];
        },
      ),
    ),
  ),

Keep in mind that the image will always fit to the width and height, similar to BoxFit.contain. So, if you set the canvas to 500x500, the image will automatically adjust to fit the editor's size. If you prefer not to use this behavior, you can still follow the instructions above, but you will need to crop the final image manually and set the size from the image to your device size. In that case I recommend using the image package, which simplifies the process of cropping a specific area from the image.

[edwarddubi]

@hm21 Sorry again, I have been busy and just came back. Yes, I did something similar and achieved what I wanted using decodedImageSize coupled with IgnorePointer. Thanks again for such an awesome painting library.