如何让Flutter Material3的DropdownMenu下拉菜单铺满屏幕宽度？

当给Material3的DropdownMenu设置width: double.infinity时，下拉菜单的宽度默认是根据菜单项内容自动计算的，不会继承输入框的宽度，导致下拉列表比输入框宽。用Expanded或SizedBox.expand包裹会报错，是因为DropdownMenu本身需要明确的尺寸约束，无法直接适配无限宽的强制拉伸。

解决方案：约束下拉菜单宽度与输入框一致 #

可以通过两种方式实现：

方法1：使用LayoutBuilder获取父容器宽度，同步给下拉菜单

通过LayoutBuilder拿到当前可用宽度，在DropdownMenu的menuStyle中设置下拉菜单的宽高约束，使其和输入框宽度匹配：

LayoutBuilder(
  builder: (context, constraints) {
    return DropdownMenu<String>(
      width: constraints.maxWidth,
      menuStyle: MenuStyle(
        minimumSize: MaterialStateProperty.all(
          Size(constraints.maxWidth, 0),
        ),
        maximumSize: MaterialStateProperty.all(
          Size(constraints.maxWidth, double.infinity),
        ),
      ),
      initialSelection: 'Option 1',
      dropdownMenuEntries: const [
        DropdownMenuEntry(value: 'Option 1', label: 'Option 1'),
        DropdownMenuEntry(value: 'Option 2', label: 'Option 2'),
        DropdownMenuEntry(value: 'Option 3', label: 'Option 3'),
        DropdownMenuEntry(value: 'Option 4', label: 'A very long option label that would normally stretch the dropdown'),
      ],
    );
  },
)

方法2：用IntrinsicWidth包裹DropdownMenu

IntrinsicWidth会让子组件根据自身内容确定宽度，结合double.infinity让输入框撑满父容器，同时下拉菜单会自动匹配这个宽度：

IntrinsicWidth(
  child: DropdownMenu<String>(
    width: double.infinity,
    initialSelection: 'Option 1',
    dropdownMenuEntries: const [
      DropdownMenuEntry(value: 'Option 1', label: 'Option 1'),
      DropdownMenuEntry(value: 'Option 2', label: 'Option 2'),
      DropdownMenuEntry(value: 'Option 3', label: 'Option 3'),
      DropdownMenuEntry(value: 'Option 4', label: 'A very long option label that would normally stretch the dropdown'),
    ],
  ),
)

原方法报错原因 #

Expanded和SizedBox.expand会给子组件传递无限宽的约束，但DropdownMenu的下拉菜单部分需要具体的尺寸范围，无法处理无限宽的约束，因此会抛出布局错误。

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