Can outsideCaptureAreaLayerOpacity be changed while isLayerBeingTransformed is true?

[yangheecho]

Hi 👋

In my app I set outsideCaptureAreaLayerOpacity to 1.0 to fully cover the area outside the image frame.
This works as intended in normal cases.

However, when a user drags a layer to delete it (the trash target can be outside the image area), the layer may become invisible as soon as it moves outside the frame — especially when the image itself is small.

What I want:

Keep outsideCaptureAreaLayerOpacity = 1.0 normally.

While isLayerBeingTransformed == true (dragging / transforming a layer), temporarily apply a lower opacity (or 0.0) so the layer remains visible even outside the image frame.

Restore the opacity after the interaction ends.

Is there a supported way to update outsideCaptureAreaLayerOpacity dynamically based on isLayerBeingTransformed?
If not, is there a recommended extension point or listener to implement this behavior?

Thanks!

[hm21]

The best way to do that is to use callbacks to check when the user moves a layer and then update the config values accordingly. For example:

 double _outsideOpacity = 1;

  @override
  Widget build(BuildContext context) {
    return ProImageEditor.asset(
      kImageEditorExampleAssetPath,
      key: editorKey,
      callbacks: ProImageEditorCallbacks(
        mainEditorCallbacks: MainEditorCallbacks(
          onScaleStart: (value) {
            if (editorKey.currentState!.isLayerBeingTransformed) {
              _outsideOpacity = 0;
              setState(() {});
            }
          },
          onScaleEnd: (value) {
            _outsideOpacity = 1.0;
            setState(() {});
          },
        ),
      ),
      configs: ProImageEditorConfigs(
        mainEditor: MainEditorConfigs(
          style: MainEditorStyle(
            outsideCaptureAreaLayerOpacity: _outsideOpacity,
          ),
        ),
      ),
    );
  }

[yangheecho]

Thanks for the quick reply!
Just one follow-up question: is there a way to update outsideCaptureAreaLayerOpacity without calling setState()?

No problem at all if this isn’t supported — I can handle it with something like a ValueNotifier on my side.
I just wanted to check if there’s a more recommended or built-in approach.

[hm21]

No, that's not possible. You can only use a ValueNotifier in that case. But generally, I recommend keeping the editor in a separate widget anyway, so using a ValueNotifier won’t bring any performance improvement. However, if the widget that contains the editor also has a lot of other content, then using a ValueNotifier would be the better choice.