Flutter 设置明确尺寸的子MaterialButton被父Container撑满如何解决

问题原因 #

这是Flutter布局约束规则导致的：父级Container未设置alignment属性时，会将自身的紧约束（固定高度100、宽度撑满）强制传递给子组件，你给MaterialButton设置的height属性会被父级约束覆盖，最终按钮被拉伸到和父Container完全一致的尺寸。

解决方法 #

方法1：给外层Container添加alignment属性 #

直接在父Container中指定子组件的对齐规则，即可让子组件按自身设置的尺寸渲染，对齐规则可选Alignment.center/Alignment.topCenter/Alignment.bottomCenter等：

Container(
  color: lightBackground,
  height: 100,
  width: double.infinity,
  // 新增对齐配置
  alignment: Alignment.center,
  child: MaterialButton(
    height: 40,
    child: Text('Hi'),
    color: primaryColor,
    onPressed: () {},
  )
)

方法2：给MaterialButton包裹对齐组件 #

在按钮外层套Center或者Align组件，这类组件会向子节点传递松约束，允许子节点按照自身定义的尺寸渲染：

Container(
  color: lightBackground,
  height: 100,
  width: double.infinity,
  child: Center(
    child: MaterialButton(
      height: 40,
      // 如需自定义按钮宽度可新增minWidth属性
      // minWidth: 200,
      child: Text('Hi'),
      color: primaryColor,
      onPressed: () {},
    ),
  )
)

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