Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to position a widget in a Stack based on coordinates flutter

Tags:

flutter

dart

My question is simple. Lets say i have an offset value of (128.2, 324.9) which is the coordinates of a position in a stack. How can i a position a widget in the stack targetting this offset value. I currently have my GestureDetector class giving me this coordinates value but i want to also add a widget tin that position dynamically.

Widget addIndicatorImage(Offset offset) {
    if(_tapPosition!=null){
      return Positioned(child:
      new Image.asset('images/pain_report_indicator.png',
        height: 32, width: 32,));
    }else{
      return Container();
    }

  }

 Stack(
                children: [
                  GestureDetector(
                    onTapDown: _handleTapDown,
                    onTap: () {

                    },
                    child: Container(
                        child: Image.asset(
                      images[index],
                      height: 500,
                      width: double.infinity,
                    )),
                  ),
                  addIndicatorImage(_tapPosition),
                  ),
                ],
              ),
like image 501
bensofter Avatar asked May 12 '26 01:05

bensofter


1 Answers

Example

Center is used to allow the Stack to fill the most space it can, constrained by its parent, otherwise Stack tries to size itself to its contents (if I remember correctly).

The Container between Center and Stack is added only for (copy/pasting) illustration to show the dimensions / border of the Stack. This widget isn't needed.

The Positioned widget would normally take two arguments, an X and a Y. But, the somewhat confusing part is that it doesn't automatically use the top left corner of your child. Instead you choose which sides of your child you wish to offset from its respective side of the Stack. See the comments in code below. You could use right: and bottom: for example instead of top: and left:

class StackPositionedExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(width: 5, color: Colors.lightGreenAccent)
        ),
        child: Stack(
          children: [
            Positioned(
              left: 50, // distance between this child's left edge & left edge of stack
              top: 150, // distance between this child's top edge & top edge of stack
              child: Container(
                height: 100,
                width: 100,
                color: Colors.blue,
                alignment: Alignment.center,
              ),
            )
          ],
        ),
      ),
    );
  }
}
like image 151
Baker Avatar answered May 15 '26 13:05

Baker



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!