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 ia 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),
),
],
),
You can use a Positioned Widget to change the position of your widget as you like giving it top, right, bottom, left coordinates you can also use height and width to change the size of widget.
simply wrap the widget in this case the container as shown
Positioned(
left:128.2,
top: 324.9,
child: Container(
child: Image.asset(
mages[index],
eight: 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,
),
)
],
),
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.