Adding widgets upon image -flutter, dart

Question

I have an image like this

and i need to add widgets upon this image. It should look like the contents are just on the mobile screen. I tried searching for a way but i dint get any. I tried using stack like this:

Container(
    child: Stack(
      children: <Widget>[
        Positioned(
          child: Container(
            padding: EdgeInsets.fromLTRB(60, 110, 60, 90),
            //body
          ),
        ),
        Container(width: 1000,
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage('Assets/Images/transparentMobile.png'),
                  fit: BoxFit.fill)),
        ),
      ],
    ),
  ),

It worked correctly on my phone:

but on other phone it looks very different. How do i write a single code for multiple screens?

Answer 1

Finally i got a way to do it. Instead of working hard on the code, i just cropped the image into 3 parts :

top :

body:

bottom:

and added them to columns like this:

AspectRatio(
      aspectRatio: 1/2,
      child: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
        Expanded(
          child: Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('Assets/Images/Mobile/mobileTop.png'),
                    fit: BoxFit.fill
                )
            ),
          ),
        ),
            Expanded(
              flex: 7,
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 20),
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('Assets/Images/Mobile/mobileBody.png',),
                    fit: BoxFit.fill
                  )
                ),
                height: 100,
                child: Scaffold(
                    appBar: AppBar(
                      backgroundColor: Colors.blue,
                      automaticallyImplyLeading: false,
                      title: Text('My Application'),
                    ),
                    body: Center(
                      child: Text(
                        'Hello World!',
                        style: TextStyle(color: Colors.black),
                      ),
                    ),
                    backgroundColor: Colors.white,
                  ),
              ),
            ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('Assets/Images/Mobile/mobileBottom.png'),
                        fit: BoxFit.fill
                    )
                ),
              ),
            ),

          ],
        ),
      ),
    ),

and the image now looks much similar on most of the devices now:

Thanks for your help!