marcglasberg / align_positioned Goto Github PK

https://stackoverflow.com/questions/72583553/flutter-aligning-overflowed-children
Can this library solve this problem?

Although dx and dw can be used to move the middle image of the 3x3 array to the middle of the parent container, it seems difficult to operate in a reactive manner on multiple devices.

Can the center image(2x2) always be centered in the parent widget in a reactive 3x3 array?

AlignPositioned.relative(
  widgetA(),
  widgetB(),
  moveByContainerHeight: 0.5,
  moveByChildHeight: 0.5,
),

Seems like widgetB can't be bigger than widgetA. Is it possible to do?
What I want to achieve is to make widgetA an icon and widgetB a GestureDetector of a bigger size. So that button icon perfectly fits into the design but with a bigger touch area.

Switching pages will rebuild and cause the screen to flicker
The widget will move from the lower right corner to the set position
How to solve

Assume we have a parent widget (a Container), with no fixed size, and positioned absolutely (within it's own parent) at a top/left (x/y) coordinate. Then we place a child widget (with no fixed or known size) within the parent. Using your library, is there a way to position the child at -0.5 of its own width and height, such that the child's center appears at the x/y coordinate of its parent? I'm trying to achieve this using your (fantastic) library but when I don't specify the width/height of the parent, I get the following error.

RenderBox was not laid out: _RenderAlignPositionedBox#7e614 relayoutBoundary=up10
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'

Is there any way to set child's height as a proportion to parent's width? This is a very common need and it would be very nice if it would be supported internally from the plugin (without writing a setState manually). Example use case: size a container with the same width and heigh that equals to 1/5 of parent's width.

Kudos for your excellent work with all your published plugins!

Hi and thank you for share you very good library with us...
I've a problem when use it with SingleChildScrollView.
I use SingleChildScrollView as child of AlignPositioned and the scrolling is not handled by SingleChildScrollView.

First of all, thank you for making this library, very easy to use.

The issue I am facing now is that when I try to use AlignPositioned in another stack nested inside the parent AlignPositioned widget, the layout is messed up.

I am wondering if there is any solution for this. Thanks

Stack
 |-- AlignPositioned
       |-- Stack
             |-- AlignPositioned

Hi there, feel free to close if it's not within the scope of this project. I would be nice to have a couple animated GIF examples, especially AnimChained. Thanks!

Hi dear @marcglasberg . I hope you are doing great.

I've been a user of this package for a long time. I just forgot to say you that it is needed to add the.expand() constructor for the AnimatedAlignPositioned widget.

You already added it for the AlignPositioned. Currently, I am solving this issue by wrapping the widgets like this:

Stack(
  children: [
    Positioned(
      top: 0,
      right: 0,
      left: 0,
      bottom: 0,
        child: AnimatedAlignPositioned(
...
...
...

So the the Positioned(top: 0, right: 0, left: 0, bottom: 0, child: child) widget let the AnimatedAlignPositioned take the size of the parent Stack widget.

Use Case

I have another widget inside the stack that basically shows an image pager whose height is determined by an AspectRatio. Since I use the AspectRatio widget, the non-positioned child of the stack (the image pager) has no height value. However, it can be laid out. So in such a case, without the .expand() constructor, I have to use a Positioned widget.

Not a big deal but it could be easier to implement. (Also there might be people that do not know how the stack widget works. Sometimes, even I forget to wrap it with the Positioned(top: right: left: bottom: 0, child: child) that makes me wonder "What I did wrong?" There can be a documentation update too.)

Thanks a lot!

Try to recreate a sample code from the first example (with a semi-transparent circle on the left of the red container) and wrap that circle into Material -> InkWell.

Tap will be recognized only if you tap on the overlapping with the red container section of the circle, otherwise, it will be ignored.

Working tap area is this:

Whereas anyone would expect it to be the whole circle widget.