I have 3 positioned as children of Stack inside of ListView.builder also set top and right for all 4 positioned when run, got this error
size.isFinite
if used in the demo the stack and inside of positioned work well. how to solve.
here i have one list
List<Widget> movableTextWidgets = [];
and one stack image
Stack(
children: [
Hero(
tag: "${widget.index}",
child: AspectRatio(
aspectRatio: 5 / 7, // Set your desired aspect ratio
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
boxShadow: const [
BoxShadow(
blurRadius: 4,
),
],
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage("images/${widget.index}.png"),
),
),
),
),
),
),
...movableTextWidgets,
],
)
if when i have click on the floation action button its called the one method and this method called MovableTextBox.
void _addMovableTextBox() {
setState(() {
movableTextWidgets.add(MovableTextBox());
});
}
when this class call the show error in return stack.
class MovableTextBox extends StatefulWidget {
@override
_MovableTextBoxState createState() => _MovableTextBoxState();
}
const ballDiameter = 15.0;
class _MovableTextBoxState extends State<MovableTextBox> {
double width = 200.0;
double height = 80.0;
double top = 100;
double left = 100;
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Positioned(
top: top,
left: left,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
top += details.delta.dy;
left += details.delta.dx;
});
},
child: Stack(
children: [
Container(
width: width,
height: height,
),
// Top left corner
Positioned(
top: -ballDiameter / 2,
left: -ballDiameter / 2,
child: ManipulatingBall(
onDrag: (dx, dy) {
setState(() {
width -= dx;
height -= dy;
top += dy;
left += dx;
});
},
),
),
// Top right corner
// Bottom left corner
// Bottom right corner
],
),
),
)
]
);
}
}
class ManipulatingBall extends StatefulWidget {
ManipulatingBall({Key? key, required this.onDrag}) : super(key: key);
final Function onDrag;
@override
_ManipulatingBallState createState() => _ManipulatingBallState();
}
class _ManipulatingBallState extends State<ManipulatingBall> {
late double initX;
late double initY;
_handleDrag(details) {
setState(() {
initX = details.globalPosition.dx;
initY = details.globalPosition.dy;
});
}
_handleUpdate(details) {
var dx = details.globalPosition.dx - initX;
var dy = details.globalPosition.dy - initY;
initX = details.globalPosition.dx;
initY = details.globalPosition.dy;
widget.onDrag(dx, dy);
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onPanStart: _handleDrag,
onPanUpdate: _handleUpdate,
child: Container(
width: ballDiameter,
height: ballDiameter,
decoration: BoxDecoration(
color: Colors.black,
shape: BoxShape.circle,
),
),
);
}
}
what my mistake in this code.