Flutter 如何在Flatter中创建此UI设计？

我想创造这种类型的设计。这里一个小部件稍微向上，一个小部件稍微向下。它们不是一排直的。最好的方法是什么？？？注：我画红色边框是为了更好地理解。我在网上找到了这个设计，在这里只是为了演示

不知怎的，我做到了，但我不认为这段代码将帮助我在真正的应用程序中，我将创建一个自定义小部件，然后调用它，因为我想很多次。这是我的代码和它的输出。这类设计（主题）有什么名字吗。提前谢谢

return Scaffold(
  appBar: AppBar(
    title: Text("TempPage"),
  ),
  body: Column(
    children: [
      Container(
          height: 629.0,
          width: MediaQuery.of(context).size.width * 1.0,
          color: Colors.green,
          child: Stack(
            children: [
              Positioned(
                top: 70.0,
                left: 10.0,
                child: Container(
                  color: Colors.red,
                  height: 250.0,
                  width: 150.0,
                ),
              ),
              Positioned(
                top: 30.0,
                left: 200.0,
                child: Container(
                  color: Colors.blue,
                  height: 250.0,
                  width: 150.0,
                ),
              ),
              Positioned(
                top: 350.0,
                left: 10.0,
                child: Container(
                  color: Colors.orange,
                  height: 250.0,
                  width: 150.0,
                ),
              ),
              Positioned(
                top: 300.0,
                left: 200.0,
                child: Container(
                  color: Colors.purple,
                  height: 250.0,
                  width: 150.0,
                ),
              ),
            ],
          ),
          ),
    ],
  ),
);

---

您可以为该UI创建交错网格视图（）。非常感谢。。这看起来很有用。