包裹元素，如俄罗斯方块

如何解决包裹元素，如俄罗斯方块

希望我能解释一下我自己。我有很多小部件，基本上都是具有不同宽度和高度的容器。

目标是在渲染屏幕时，我分配 N 个容器堆叠起来。

在过去的 2 天里，我试图让小部件像“俄罗斯方块”一样填充（这不是游戏或俄罗斯方块，也不需要动画，但这是我试图实现的最著名的参考） .

我尝试了很多方法，这些方法实现了海豚，但对坐标进行了硬编码。

• 创建列和行、换行、堆叠定位。

只想添加N个小部件并动态制作，但不知道如何。

Wrap 是我认为可行的方法，但似乎无法解释如何强制（在这个愚蠢的示例中）黄色容器上升。

仅供参考：如果容器不适合宽度的原因，那很好，但在示例中确实应该放置在红色容器的下方。

@override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        Container(
          color: Colors.red,constraints: BoxConstraints(
            maxHeight: 200,maxWidth: context.width / 2,),Container(
          color: Colors.blue,constraints: BoxConstraints(
            maxHeight: 300,Container(
          color: Colors.yellow,],);

希望有人能启发我并提前致谢