How to save these & re-display so they'll be responsive

[lukeirvin]

I noticed within this that it saves a position, but I've had issues with getting that to work to display what I have created.

Right now I am trying to get the various bounds & use that but still having issues.

Currently, I am using this extension:

extension GlobalKeyExtension on GlobalKey {
  Rect? get globalPaintBounds {
    final renderObject = currentContext?.findRenderObject();
    final translation = renderObject?.getTransformTo(null).getTranslation();
    if (translation != null && renderObject?.paintBounds != null) {
      final offset = Offset(translation.x, translation.y);
      return renderObject!.paintBounds.shift(offset);
    } else {
      return null;
    }
  }
}

Then on the Container or SizedBox of the Custom Widget I am adding, I would set a key like so:

final myCustomContainerKey = GlobalKey();

Container(
    key: myCustomContainerKey,
    child: ...

Saving the positionings:

'left': myCustomContainerKey.globalPaintBounds!.left,
'top': myCustomContainerKey.globalPaintBounds!.top,
'right': myCustomContainerKey.globalPaintBounds!.right,
'bottom': myCustomContainerKey.globalPaintBounds!.bottom,

When I display the UI again:

Positioned.fromRect(
      rect: Rect.fromLTRB(
        (left is int) ? left.toDouble() : left,
        (top is int) ? top.toDouble() : top,
        (right is int) ? right.toDouble() : right,
        (bottom is int) ? bottom.toDouble() : bottom,
      ),
      child: ...

This has been working pretty decent if I stay within the same device or simulator, but if I am doing this on an iPhone 14 Pro & then switch to an SE, the widgets will be in the wrong position or off-screen.

What would be the best way to save the positioning & keep it responsive among screen sizes?