flutter - 在图像上添加小部件- flutter , Dart

标签 flutter dart

我有这样的图像image
我需要在此图像上添加小部件。看起来内容只是在移动屏幕上。我试图寻找一种方法,但我没有得到任何帮助。我尝试使用这样的堆栈:

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)),
        ),
      ],
    ),
  ),
它在我的手机上正常工作:image
但在其他手机上,看起来却大不相同。如何为多个屏幕编写单个代码?

最佳答案

终于我有了办法。我没有认真研究代码,而是将图像分为三部分:
顶部:top
正文:body
底部:bottom
并将它们添加到这样的列中:

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

          ],
        ),
      ),
    ),
现在该图像在大多数设备上看起来都非常相似:image
谢谢你的帮助!

关于flutter - 在图像上添加小部件- flutter , Dart ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63343229/

相关文章:

flutter - 是否可以更改文本和边框之间的边距/填充?

flutter - 隔离器被杀死时, flutter 隔离器内的计时器不会停止

android - Flutter - 如何将数据从网站解析为 ListView

list - 检查内部列表是否在Flutter中包含一些字符串值

dart - 获取 _InternalLinkedHashMap<String, dynamic >' is not a subtype of type ' FutureOr<Response>'

Flutter:正确显示本地日期时间

javascript - 如何将 Google Dart 与 Firebase 简单登录一起使用(函数内传递函数)

flutter - 如何在 Flutter 上禁用 SSL 固定?

firebase - 错误 : _elements. 包含(元素)不正确

android - flutter 深度链接在真实设备上不起作用