如何为Flutter Container添加适配子组件尺寸而非父组件尺寸的边框？

当前你的Container边框会撑满整个屏幕（如图），这是因为默认情况下Container会扩展以填充父组件（Scaffold的body）的可用空间，而我们需要让边框只包裹内部子组件的内容。

当前布局：

期望布局：

核心调整方案 #

只需要两步就能实现需求：

• 用Center包裹外层Container：Center会限制Container的尺寸，使其仅适配内部子组件的大小，不再占满父组件空间。
• 给内部Column设置mainAxisSize: MainAxisSize.min：默认Column会在垂直方向占满父组件高度，设置为min后，Column只会包裹垂直方向上所有子组件的总高度。

另外建议给Container添加padding，让内容和边框之间保留合适间距，提升视觉体验。

修改后的完整代码 #

return Scaffold(
  backgroundColor: Color(0XFF136154),
  body: Center(
    child: Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.white),
        borderRadius: BorderRadius.circular(15),
      ),
      padding: EdgeInsets.symmetric(horizontal: 24, vertical: 32),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // 登录文本
          Text(
            "登录",
            style: TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 24),
          // 邮箱输入框
          TextField(
            decoration: InputDecoration(
              filled: true,
              fillColor: Colors.white,
              hintText: "输入邮箱",
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
            ),
          ),
          SizedBox(height: 16),
          // 密码输入框
          TextField(
            obscureText: true,
            decoration: InputDecoration(
              filled: true,
              fillColor: Colors.white,
              hintText: "输入密码",
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
            ),
          ),
          SizedBox(height: 24),
          // 登录按钮
          ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.white,
              foregroundColor: Color(0XFF136154),
              minimumSize: Size.fromWidth(200),
              padding: EdgeInsets.symmetric(vertical: 12),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
            ),
            child: Text("登录", style: TextStyle(fontSize: 16)),
          ),
        ],
      ),
    ),
  ),
);

内容的提问来源于stack exchange，提问作者Shamil PP