你如何让这个简单的 flutter 布局响应式?

How would you make this simple flutter layout responsive?

自从上次我不得不使用 flutter 为我的公司构建一个小应用程序以来已经过去了一年。当时 MediaQuery 是为各种屏幕尺寸创建布局的流行方式。

今天我正在尝试构建一个像这样的简单布局:

我关心的部分是中间的3个圆圈。它们内部有图标和文字,必须位于屏幕上看到的位置。

所以,我一直在研究如何以响应方式创建布局的那一部分。我的意思是,圆圈相对于屏幕尺寸位于正确的位置和大小,圆圈内的图标和文本也正确定位和调整大小,以避免溢出圆圈。

MediaQuery class 是否仍然是唯一可用于构建此类响应式布局的工具?您会使用不同的方法处理此布局吗?

是的 MediaQuery 仍然被大量使用,但 Flutter 引入了一些基于 Orientation 和 Responsive Layouts 的好部件:

OrientationBuilder - 根据方向构建不同的小部件树 - 例如,如果设备是水平的,您可能会看到方形而不是圆形。

CustomMultiChildLayout - It can automatically decide how to size and position each child, as well as size the parent. Single widgets can be used CustomSingleChildLayout

另外,当自动调整文本大小时,我发现 Auto Size Text 很棒