get error of size.isFinite when set top, bottom, left and right for positioned in stack

90 Views Asked by At

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.

0

There are 0 best solutions below