Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Widget Placement Issues #45

Open
lukeirvin opened this issue Jan 23, 2023 · 0 comments
Open

Widget Placement Issues #45

lukeirvin opened this issue Jan 23, 2023 · 0 comments

Comments

@lukeirvin
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant