Widget Placement Issues

[lukeirvin]

What is the best approach for having widgets appear responsively across devices as well as having multiple widgets with gestures at once?

I'm trying something like this:

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:

itemBuilder: (context, pageIndex, storyIndex) {
    return Align(
          child: Padding(
            padding: EdgeInsets.only(
              left: (left is int) ? left.toDouble() : left,
              top: (top is int) ? top.toDouble() : top,
              right: (right is int) ? right.toDouble() : right,
              bottom: (bottom is int) ? bottom.toDouble() : bottom,
            ),
            child: 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: Transform.rotate(
                angle: (rotation is int) ? rotation.toDouble() : rotation,
                child: Transform.scale(
                  scale: (scale is int) ? scale.toDouble() : scale,
                  child: ....

Some of the issues I am facing include: • Removing Align causes overall issues with viewing any of the widgets. • If I am trying to view multiple widgets at once, most of this logic is ignored & all the widgets are placed in the center of the screen.