Adding widgets upon image -flutter, dart - flutter

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!