Get error of size.isFinite when set positioned for container in stack Flutter

Question

I have set positioned as children in Stack.

But when running the code, the error shows this type:

Failed assertion: line 600 pos 12: 'size.isFinite': is not true.

This is my full code. I have used one stack image and this image I add the resizable container for adding the text on this image.

import 'package:flutter/material.dart';
import 'editPage.dart';

void main() {
  runApp(EditPage());
}

This is the edit page code. Here I have to add one stack image with size is in the based on the aspect ratio.

class EditPage extends StatefulWidget {
  const EditPage({super.key,});
  @override
  State<EditPage> createState() => _EditPageState();
}

class _EditPageState extends State<EditPage> {
  List<Widget> movableTextWidgets = [];
  @override
  Widget build(BuildContext context) {
    return Directionality(
        textDirection: TextDirection.ltr,
      child:   Scaffold(
      backgroundColor: Colors.white.withOpacity(0.9),
      body: SafeArea(
        child: Column(
          children: [
           Stack(
        children : [
            Hero(
              tag: "image1",
              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,
                //add image here any
                        image: AssetImage("images/2.png"),
                      ),
                    ),
                  ),
                ),
              ),
            ),
            ...movableTextWidgets,
              ],
            )
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.lightGreenAccent,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(50.0))),
        foregroundColor: Colors.black,
        onPressed: () {
          _addMovableTextBox();

        },
        child: Icon(Icons.add),
      ),
      )
    );
  }
  void _addMovableTextBox() {
    setState(() {
      movableTextWidgets.add(MovableTextBox());
    });
  }
}

This is the movable class code:

import 'package:flutter/material.dart';

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 is wrong in the code?

Answer 1

You need to wrap your widget in a MaterialApp

import 'package:flutter/material.dart';
import 'editPage.dart';    

void main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: EditPage(),
    );
  }
}