如何根据ElevatedButton文本长度设置动态按钮宽度？

要让ElevatedButton的宽度根据文本长度动态调整，只需解决两个核心问题：移除按钮默认的最小宽度限制，以及确保内部子组件不会强制占满宽度。以下是具体实现方案：

优化后的代码 #

Container(
  height: 36.0,
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
      // 移除按钮默认的最小宽度限制，允许按钮收缩到内容宽度
      constraints: const BoxConstraints(minWidth: 0),
      // 可选：调整按钮内容与边框的间距
      padding: const EdgeInsets.symmetric(horizontal: 16),
    ),
    onPressed: () {},
    child: Row(
      // 设置Row仅占用内容所需的最小宽度，而非撑满父容器
      mainAxisSize: MainAxisSize.min,
      children: const <Widget>[
        Icon(Icons.power_settings_new_outlined),
        // 图标与文本之间添加间距，提升美观度
        SizedBox(width: 8),
        Text("Login"),
      ],
    ),
  ),
)

关键调整点说明 #

• 移除默认最小宽度：通过ElevatedButton.styleFrom的constraints设置minWidth: 0，消除Material Design默认的最小宽度限制（通常为88px），让按钮可以根据内容自由收缩。
• Row设置最小宽度模式：将Row的mainAxisSize设为MainAxisSize.min，避免Row强制占满按钮的可用宽度，确保Row的宽度仅由内部图标和文本决定。
• UI细节优化：在图标和文本之间加入SizedBox分隔，也可通过按钮的padding属性调整内容与边框的距离，提升整体美观性。

如果不需要外层Container，也可以直接通过按钮样式设置高度，简化代码：

ElevatedButton(
  style: ElevatedButton.styleFrom(
    fixedSize: const Size.fromHeight(36),
    constraints: const BoxConstraints(minWidth: 0),
    padding: const EdgeInsets.symmetric(horizontal: 16),
  ),
  onPressed: () {},
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: const [
      Icon(Icons.power_settings_new_outlined),
      SizedBox(width: 8),
      Text("Login"),
    ],
  ),
)

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