flutter - 如何获得响应式 Flutter 布局？

Question

创建响应式布局的最佳实践是什么？我知道您可以使用媒体查询来获取尺寸信息来指示要做什么；例如台式机、平板电脑、手机的不同屏幕。

但是，使用 Expanded 是常见的做法吗？或 Flex属性以确保小部件增长或填充适当的屏幕尺寸？作为一名新的 Flutter 开发人员，试图了解如何在典型用例上取得平衡。

Answer 1

在响应式 UI 中，我们不使用硬编码值来表示尺寸和位置。使用 Sizer插件来获取窗口的实时大小。

任何屏幕尺寸设备中的响应式 UI 以及平板电脑。检查它这个插件⬇️
https://pub.dev/packages/sizer

.h  - for widget height
.w  - for widget width
.sp - for font size

使用 .h , .w , .sp像这样的值(value)后⬇️
例子:

Container(
  height: 10.0.h,  //10% of screen height
  width: 80.0.w,   //80% of screen width
  child: Text('Sizer', style: TextStyle(fontSize: 12.0.sp)),
);

我用这个插件构建了许多响应式 UI。