Adding a layer between background image and the other layers

[saif-ellafi]

Hello there!!

Was daydreaming about stretching pro image editor quite far, and I've got the math and all.

I am adding along the appBar and bodyItems a fictional grid. However this stands on top of editor widgets.

Any thoughts on perhaps allowing an "image" layer? Not sure how filters or the like work, perhaps they could be used here. The goal would be for this grid to stand over the image but under everything else.

![Screenshot_2025-06-26-10-18-51-466_com

Thanks for the rock n roll library!

[hm21]

I think the best solution in your case is to add a WidgetLayer with all interactions set to false, so the user can't move the grid. In the prereleases for version 10.0.0, I added a new method called moveLayerToBack, which lets you move that layer behind all others. This way, the grid stays in the background and isn't affected by filters or other elements.

FYI: Below is a very simplified structure of how the editor works (in reality, many more widgets are required, but this gives you an idea of the concept):

• Body-Stack
  • Web-Font-Preloader
  • Interactive-Viewer
    • Content-Recorder (Everything inside this section will be recorded to generate the output image)
      • Crop-Transformers
        • Filters
          • Background-Image
      • Layers
      • Custom Recorded Body items (bodyItemsRecorded inside MainEditorWidgets)
  • Crop-Overlay
  • Video-Controls (Optional)
  • Remove Area
  • Custom Body items (bodyItems inside MainEditorWidgets)

[saif-ellafi]

Dear goodness how did I never think of doing this with a Widget. I was adding a literal stack layer on top of the image editor and exploring the sizesManager to do all sort of mathematical trickery.

Talking about "z-index" however could be incredibly useful!!!

I will definitely try this out and oh my god I spent so many hours mapping a stacked Overlay instead of a locked widget!

[saif-ellafi]

@hm21 Thank you for the good idea, it works well, however I am facing a "limitation" (other than the moveLayerToBack bug), which is that for this Grid I need to set custom BoxConstraints (so the layer occupies the space of the entire image). However, BoxConstraints are not being serialized in the history, so I need to reset them manually:

                    onImportHistoryEnd: (editorState, history) {
                      // Fix for grid layer size not being restored from history.
                      print('active layers after import history: ${editorState.activeLayers.length}');
                      final gridLayer = getGridLayer();
                      if (gridLayer != null) {
                        final meta = gridLayer.exportConfigs.meta;
                        if (meta != null && meta.containsKey('width') && meta.containsKey('height')) {
                          final width = meta['width'] as double;
                          final height = meta['height'] as double;
                          // Manually re-apply the constraints after the editor has initialized.
                          setState(() {
                              gridLayer.boxConstraints = BoxConstraints.tight(Size(width, height));
                          });
                        }
                      }
                    },

Do you think this is something that is useful to be added natively in the library? I am just fine with this workaround but yes I need to reapply the constraints for the grid widget layer to reappear as it was set by the user.

[hm21]

@saif-ellafi My bad, that’s actually the intended behavior, but it was a bug cuz I forgot to handle the constraints in the specific layer class. Currently, it's only handled here, which was pointless since I didn’t use it in every factory constructor like WidgetLayer.fromMap. However, this should now be fixed in version 10.2.1.

[saif-ellafi]

I am confused now, was it intended behavior, a bug, or a feature? :D