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),
),
],
),
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,
),
)
],
),
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With