为什么Flutter中ElevatedButton会被拉伸至屏幕宽度？如何适配内容宽度？

你可以通过以下两种常用方案解决这个问题：

• 方案1：用Align或Center组件包裹按钮，打断父布局的强制宽度约束
  默认状态下ListView会将子组件的宽度强制拉满到自身宽度，Align/Center会把父级传递的紧约束转为松约束，按钮就会自动适配内部文本的大小，也可以自由调整按钮在父容器内的对齐位置。
  修改后的对应代码片段如下：

Padding(
  padding: const EdgeInsets.only(top: 20, left: 24, right: 24, bottom: 8),
  child: Align(
    alignment: Alignment.center,
    child: ElevatedButton(
        child: Text("Search!"),
        onPressed: () async {
          String word = _word.text;
          _word.text = '';
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return word == '' ? RandomResults() : Results(word);
          }));
        }),
  ),
)

• 方案2：直接通过按钮样式属性限制尺寸
  你也可以给ElevatedButton设置样式参数，去掉默认的最小尺寸限制，让按钮自适应内容大小：

Padding(
  padding: const EdgeInsets.only(top: 20, left: 24, right: 24, bottom: 8),
  child: ElevatedButton(
    style: ButtonStyle(
      minimumSize: MaterialStateProperty.all(Size.zero),
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      // 可自定义内边距调整按钮的留白大小
      padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 18, vertical: 10)),
    ),
    child: Text("Search!"),
    onPressed: () async {
      String word = _word.text;
      _word.text = '';
      Navigator.push(context, MaterialPageRoute(builder: (context) {
        return word == '' ? RandomResults() : Results(word);
      }));
    }),
)

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