Flutter使用BoxConstraints时横屏出现空白问题咨询

在Flutter 3.3.0 + Dart 2.18.0环境下，为Container配置BoxConstraints(maxWidth: 500)后，横屏状态下视图右侧出现空白。相关核心布局代码如下：

return Scaffold(
  body: Container(
    decoration: ...,
    padding: const EdgeInsets.all(16.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Flexible(
          flex: 1,
          child: Container(
            padding: const EdgeInsets.all(10.0),
            child: Image.asset(
              'assets/logo/logo.png',
              width: 300,
            ),
          ),
        ),
        Flexible(
          flex: 2,
          child: Card(
            shape: ...,
            elevation: 8.0,
            child: Container(
              constraints: const BoxConstraints(
                maxWidth: 500,
              ),
              height: 400,
              child: ListView(
                padding: const EdgeInsets.all(40),
                children: [
                  Form(
                    key: _formKey,
                    child: Column(
                      children: [
                        ...
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

问题原因 #

当前布局中，Card的宽度由内部带maxWidth约束的Container决定，最大仅为500。横屏时屏幕宽度远大于500，加上Column设置了crossAxisAlignment: CrossAxisAlignment.center，导致Card整体在屏幕水平居中，左右两侧出现空白（视觉上右侧空白较为明显）。

解决方案 #

根据需求不同，有两种调整方式：

方式一：让Card占满可用宽度，内部表单居中且限制最大宽度

修改Card内部布局层级，让Card占满屏幕可用宽度，同时将带maxWidth的表单容器居中放置，这样Card的背景会填充整个水平空间，避免右侧空白感：

Flexible(
  flex: 2,
  child: Card(
    shape: ...,
    elevation: 8.0,
    child: Container(
      width: double.infinity, // 让Card的子容器占满Card宽度
      height: 400,
      child: Center(
        child: Container(
          constraints: const BoxConstraints(maxWidth: 500),
          child: ListView(
            padding: const EdgeInsets.all(40),
            children: [
              Form(
                key: _formKey,
                child: Column(
                  children: [
                    ...
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ),
),

若需要避免表单内容贴边，可在最内层Container或ListView中添加padding: const EdgeInsets.symmetric(horizontal: 16)。

方式二：保持Card宽度随Container变化，仅让Container在宽屏时居中

直接给原Container添加width: double.infinity，结合maxWidth约束，这样屏幕宽度小于500时Container占满Card宽度；屏幕宽度大于500时，Container宽度固定为500并在Card中居中：

child: Container(
  width: double.infinity,
  constraints: const BoxConstraints(maxWidth: 500),
  height: 400,
  child: ListView(
    padding: const EdgeInsets.all(40),
    children: [
      Form(
        key: _formKey,
        child: Column(
          children: [
            ...
          ],
        ),
      ),
    ],
  ),
),

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