Flutter 在图像上添加小部件-颤振、飞镖

我有一个这样的形象

我需要在这个图像上添加小部件。它应该看起来像内容就在手机屏幕上。我试着寻找一条路，但没有找到。我试着像这样使用stack：

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)),
        ),
      ],
    ),
  ),

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
                    )
                ),
              ),
            ),

          ],
        ),
      ),
    ),

容器(
子：堆栈(
儿童：[
定位(
子：容器(
填充：从LTRB（60、110、60、90）开始的边缘设置，
//身体
),
),
集装箱（宽度：1000，
装饰：盒子装饰(
图像：装饰图像(
image:AssetImage（'Assets/Images/transparentMobile.png'），
适合：BoxFit.fill），
),
],
),
),

它在我的手机上正常工作：

---

但在另一部手机上，它看起来很不一样。如何为多个屏幕编写单个代码？

最后我找到了一种方法。我没有努力编写代码，而是将图像裁剪成3个部分：

顶部：

正文：

底部：

并将它们添加到如下列中：

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)),
        ),
      ],
    ),
  ),

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
                    )
                ),
              ),
            ),

          ],
        ),
      ),
    ),

现在大多数设备上的图像看起来都很相似：

---

谢谢你的帮助

帮你得到答案了吗？thnx，我想我应该试试。我有种感觉可以为你指出一个布局。我希望这会奏效。这行吗@Bensal？如果是的话，我会为你绘制一个布局图伟大的工作@Bensal。问题是正常的，不是每部手机都有相同的尺寸，因此每个手机图像的

定位
都不相同。我们可能需要更深入的研究来找到解决方案干得好Bensal！我对你的努力投了赞成票：）我保存你的答案，以便将来我能从中受益：）