Image position changes from center to top in flutter when adding a container

Question

I am displaying an image in Flutter. This image is displayed at the center of the screen. After I add the container using the floating action button, the image moves from the center to the top position.

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

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

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: Center(
                  child: 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(
            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());
    });
  }
}


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,
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 2,
                        color: Colors.black,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          )
        ]
    );
  }
}

What is my mistake and how do I align the image correctly in it's earlier position?

Here's the output.

The image is in the center

enter image description here

Answer 1

Add alignment: Alignment.center, in Stack located in body

body: SafeArea(
        child: Center(
          child: Stack(
            alignment: Alignment.center,
            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,
            ],
          ),
        ),
      ),

Widget will be aligned center using above property