居中对齐列中的一个 flutter 小部件及其周围的 position rest

Question

如何在中心对齐一列的一个小部件并将 rest 放在它周围？

如果我有一个 Container 左右的容器，它包含三个输入字段和按钮，另一个是上面的框。 如何在不移动中心容器的情况下将容器对齐到中间并将盒子放在剩余空间中？

我尝试使用 Expanded 或 Flexible，但无法弄清楚如何以这种方式对齐小部件。

Answer 1

您可以像这样使用Column ：

Column(
    children: [
      Expanded(
          child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          height: 40,
          width: 40,
          color: Colors.yellow,
        ),
      )),
      Container(
        color: Colors.red,
        height: 100,
        width: double.infinity,
      ),
      Expanded(
          child: Align(
        alignment: Alignment.topCenter,
        child: Container(
          height: 40,
          width: 40,
          color: Colors.green,
        ),
      )),
    ],
  ),

Answer 2

下面是一个示例，说明如何将中心容器与三个输入字段和一个按钮及其上方的框对齐：`

Column(
    children: [
        Expanded(
            child: FractionallySizedBox(
                widthFactor: 0.8,
                child: Center(
                    child: Container(
                        child: Column(
                            children: [
                                // Three input fields
                                // Button
                            ],
                        ),
                    ),
                ),
            ),
        ),
        // Box above
    ],
)