android - 如何在flutter中根据不同的屏幕尺寸对齐堆栈内的小部件

Question

嗨，我陷入了一个小问题。我想在堆栈小部件内的屏幕上对齐我的 float 按钮。我无法执行的操作是根据不同手机的屏幕尺寸进行动态调整。如果我将其对准模拟器中的所需位置，则当您在设备上运行它时，它会从其原始位置分散开。我使用了具有top:，right:等属性的Positioned()小部件，还尝试了margin:属性和Align()小部件的Container()，但似乎无济于事。以下是可能会帮助您并进行编码的屏幕截图。

return Scaffold(
  body: Stack(
    children: <Widget>[
      ....
     Container(
        margin: EdgeInsets.only(bottom: 277, right: 10),
        alignment: Alignment.bottomRight,
        child: showFloatingBtn2 ? SpeedoMeterFloatingBtn() : SizedBox(),
      ),
    ],
  ),
);

如果您看到image1，您会看到红色的 float 按钮不在正确的位置，我的问题是，当我将其放置在模拟器上的图像2中的位置时，它在我的设备上不对齐，反之亦然。我无法解决这个问题。任何帮助将不胜感激。提前致谢。

注意:在仿真器上，image1的底部为:227，在仿真器上，image2的底部为:277。

Answer 1

您可以使用屏幕实用程序包https://pub.dev/packages/flutter_screenutil

这是处理多个屏幕的最佳软件包
它只是使所有屏幕具有相同的分辨率，然后通过简单的扩展，您就可以指定宽度高度或文本大小，并且可以缩放到不同的屏幕，没有问题[也许是小问题]

您只需要在构建方法中初始化它即可(对于我认为的每条路线)

//默认值:宽度:1080px，高度:1920px，allowFontScaling:false

ScreenUtil.init(context);

我建议在pubspec.yaml中将dart sdk设置为2.7以使用扩展功能

environment:
  sdk: ">=2.7.0 <3.0.0"

能够做到这一点

Container(
width: 50.w,
height:200.h
)

阅读更多文档
并尝试它太棒了