Flutter中第二个Container占满剩余空间，如何设置使其仅占用最小所需空间？

问题原因 #

Flutter的Column组件默认mainAxisSize属性值为MainAxisSize.max，会在垂直主轴方向占满所有可用的父容器剩余空间，包裹Column的红色Container默认会适配子组件尺寸，因此会出现占满剩余空间的表现。

解决方法 #

给Column添加mainAxisSize: MainAxisSize.min属性即可，该配置会让Column仅占用适配自身内容的最小高度，外层红色Container也会随之收缩到刚好容纳内部输入框的尺寸。

修改后代码示例 #

Container(
  height: 600,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(60),
    ),
  ),
  child: Padding(
    padding: const EdgeInsets.only(top: 80.0, right: 50, left: 50),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.all(
          Radius.circular(20),
        ),
      ),
      child: Column(
        // 新增此行配置即可实现需求
        mainAxisSize: MainAxisSize.min,
        children: [
          TextFormField(
            decoration: const InputDecoration(
                border: UnderlineInputBorder(),
                labelText: "Email or Phone Number"),
          ),
          SizedBox(
            height: 20,
          ),
          TextField(
            decoration:
                InputDecoration.collapsed(hintText: 'PassWord'),
          )
        ],
      ),
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Kavach Dheer