Flutter MediaQuery获取屏幕信息以及屏幕适配

Posted 2023-05-10

参考技术A Flutter中控件的高宽和字体大小时，使用的是逻辑像素，并非是实际的物理像素。

flutter中的屏幕适配

假设设计图的大小为1080 1920，上面一个图片的高度为 80 90，则它在设备上的高宽为

对于android手机，一般以宽度为基准计算UI的高宽，因为android手机的宽度一般就是750，1080等几个尺寸，但是高的尺寸就有很多。

推荐一个别人封装好的一个用于屏幕适配的库
Flutter屏幕适配方案插件-完美解决屏幕适配

Flutter web 获取屏幕大小

【中文标题】Flutter web 获取屏幕大小

【英文标题】：Flutter web get screen size

【发布时间】：2020-02-23 03:32:58

【问题描述】：

我第一次尝试 web 的 Flutter，并根据此文档 https://flutter.dev/web 在现有项目的基础上构建一个项目。项目运行良好，但在 chrome 中，我的应用程序在屏幕外显示了一半。我尝试使用 MediaQuery.of(context) 和 SafeArea() 获取屏幕大小，但没有任何反应。获取屏幕尺寸的正确方法是什么？

【问题讨论】：

MediaQuery 是正确的解决方案

您能分享一下您是如何使用 MediaQuery 的吗？它应该工作

很想看看这个代码。

@RémiRousselet 提到 MeadiaQuery 应该可以解决问题。我经常在我的 Web 应用程序中使用它，并且可以确认它运行良好。也许如果您发布一些不起作用的简单示例，它可能会有所帮助。可以肯定的是，希望您使用此处的Size 属性并使用相同的相应width and height。

我可以确认 MediaQuery 有效。谢谢！

【参考方案1】：

在 Flutter 中，我一直在尝试确定整个上下文视图的大小。通过在小部件的当前上下文中使用MediaQuery，您可以获得width 或height

double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

在您的小部件周围，您需要MaterialApp 或WidgetsApp。他们是给MediaQuery的人。当你调用.of(context) 时，Flutter 会一直查找 widget 树来查找 widget。

您可以通过添加类似的功能来提高响应速度

static bool isSmallScreen(BuildContext context) 
    return MediaQuery.of(context).size.width < 800;
  
  static bool isLargeScreen(BuildContext context) 
    return MediaQuery.of(context).size.width > 1200;
  
  static bool isMediumScreen(BuildContext context) 
    return MediaQuery.of(context).size.width >= 800 &&
        MediaQuery.of(context).size.width <= 1200;
  

在我看来，不要使用不支持多平台且没有超过 100 个 pub 点的垃圾库，而是创建自己的函数来做事，也可以使用扩展屏幕的 expand根据屏幕大小

不要给大小像

height:100
weight:100

在多屏使用时可能会导致屏幕崩溃