[SuperEditor] Fixes the overlays obscuring editor view in devtools painting mode (Resolves #2610)

[rutvik110]

[SuperEditor] Fixes the overlays obscuring editor view in devtools painting mode (Resolves #2610)

The greyish overlays obscuring the editor view in painting mode seems to have been result of using the SizedBox within the document overlay builders in defaultSuperEditorDocumentOverlayBuilders when they don't want to build anything.

For ex. within SuperEditorIosToolbarFocalPointDocumentLayerBuilder,

    if (defaultTargetPlatform != TargetPlatform.iOS || SuperEditorIosControlsScope.maybeNearestOf(context) == null) {
      // There's no controls scope. This probably means SuperEditor is configured with
      // a non-iOS gesture mode. Build nothing.
      return const ContentLayerProxyWidget(child: SizedBox());
    }

This is due to the render object RenderConstrainedBox used by SizedBox paints the widget with a greyish color in debug mode resulting in the overlays we see when painting mode is on. This can be confirmed by testing this in a regular app with just SizedBox widgets stacked on top of one another and going in painting mode.

  @override
  void debugPaintSize(PaintingContext context, Offset offset) {
    super.debugPaintSize(context, offset);
    assert(() {
      final Paint paint;
      if (child == null || child!.size.isEmpty) {
        paint = Paint()..color = const Color(0x90909090);
        context.canvas.drawRect(offset & size, paint);
      }
      return true;
    }());
  }

Solution:

Initially tried using SizedBox.shrink but that seems to have no effect. Finally ended up creating a custom widget BuildNothingBox that builds and paints nothing and is used in place of SizedBox within overlay builders. This solves the issue of the greyish overlay in painting mode.

After:

Before:

[matthew-carroll]

seems to have been result of using the SizedBox within the document overlay builders in defaultSuperEditorDocumentOverlayBuilders when they don't want to build anything

What about when things are built in the overlay? Do we end up with gray boxes again?

[rutvik110]

seems to have been result of using the SizedBox within the document overlay builders in defaultSuperEditorDocumentOverlayBuilders when they don't want to build anything

What about when things are built in the overlay? Do we end up with gray boxes again?

In the case of the default document overlay builders, we don't.

[rutvik110]

@matthew-carroll Some of the goldens seems be failing on the ci. After updating the goldens locally, they're passing locally but for some reason still failing on ci. Not sure what's going on there.

Running on Flutter master 3.31.0-1.0.pre.348