如何使用flutter应用程序处理不同的屏幕尺寸

Question

我正在做一个可以在苹果，安卓，网页和台式机上使用的应用程序，所以对于许多不同的屏幕尺寸-手机，平板电脑，笔记本电脑，台式机等。设计三种不同的布局(小、中、大)是否合理，其中每个布局可能略有不同，或者更常见的是只有一个基本布局，一行一行地填充小部件，并在一行填满时自动开始下一行。

[编辑]我的意思是，对于大屏幕，我可以有一组小部件，而对于小屏幕，我可以有一组完全不同的小部件——这样做是合理的还是太麻烦了?例如，如果用户从一个大窗口开始，然后调整窗口的大小使其变小，那么外观和功能可能会发生一点变化-这不好吗?Kaushik发布的这个链接很有帮助颤振:如何为"真实"做响应移动web应用程序吗?

Answer 1

Using MediaQuery class:

mediaSize = MediaQuery.of(context);

然后你可以得到媒体的高度和宽度

mediaSize.size.width
mediaSize.size.height

如果要分隔不同的维度，请将上述值与另一个值相等，然后像数学运算一样进行除法。

Answer 2

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

在使用宽度和高度时使用上述代码而不是使用数字

ex:`Container(
margin:EdgeInsets.only(left:8,right:8),
width:MediaQuery.of(context).size.width -20,
height:MediaQuery.of(context).size.height
)`

这里容器的左右边距为8，高度为屏幕高度

Answer 3

使用MediaQuery可以处理应用程序中的大小问题

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