如何在flutter中构建响应式网格？

Question

我想在 Flutter Web 中构建一个包含一些图像和标题的网格。 我希望在移动设备中显示 2 列，在桌面设备中显示 4 列。 我该如何构建这个。

Answer 1

使用

LayoutBuilder

在所需宽度处建立切割点。在 LayoutBuilder 中，设置网格的列数，如下所示：

final columns = constraints.width > 500 ? 4 : 2;

然后在其中构建你的网格。您甚至可以将其设为一个公式，例如将宽度除以 250 并截断为整数。

Answer 2

拥有像 Bootstrap 这样的响应式 12 列网格系统是一种常见的 Web 开发模式，MUI 也在这样做。我正在使用 flutter_bootstrap。这是我非常满意的唯一采用这种方法的解决方案。它只是很好地解决了响应式 12 列网格问题，并没有尝试做任何其他事情。它只是有效（到目前为止 - 我没有使用它很长时间，但如果我发现任何东西，我会更新）。