如何使FlatButton尺寸适配其子文本组件大小？附代码示例

看你的需求是想让FlatButton刚好包裹住里面的文本内容，但目前的代码有几个明显问题导致达不到效果：

• 嵌套两层FlatButton完全没必要，反而会打乱布局逻辑
• 外层的Expanded会强制按钮占满父组件的可用空间
• minWidth: double.infinity直接把按钮宽度拉到最大，和你想要的"贴合文本"完全背道而驰

我给你调整一下代码，让按钮尺寸完美匹配文本大小：

修正后的FlatButton代码 #

FlatButton(
  onPressed: () {},
  color: Colors.grey,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  // 取消默认的最小宽高限制，让按钮跟随子组件尺寸变化
  minWidth: 0.0,
  height: 0.0,
  // 按需调整内边距，让文本和按钮边缘有合适的间距，避免太拥挤
  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  child: Text(
    'SHOP',
    style: TextStyle(
      color: Colors.blueAccent,
      fontWeight: FontWeight.bold,
      fontSize: 16,
    ),
  ),
)

补充：用最新的TextButton替代（FlatButton已废弃） #

如果你的Flutter版本较新，FlatButton已经被官方标记为废弃，推荐使用TextButton来实现同样效果，代码逻辑更清晰：

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    backgroundColor: Colors.grey,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
    // 取消最小尺寸限制，让按钮贴合文本
    minimumSize: Size(0, 0),
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  ),
  child: Text(
    'SHOP',
    style: TextStyle(
      color: Colors.blueAccent,
      fontWeight: FontWeight.bold,
      fontSize: 16,
    ),
  ),
)

原理说明 #

默认情况下FlatButton/TextButton都有固定的最小宽高限制，我们通过设置minWidth: 0.0（FlatButton）或者minimumSize: Size(0, 0)（TextButton）打破这个限制，让按钮可以根据子组件（你的文本）的大小自动调整尺寸。再通过padding属性控制按钮内部的留白，既贴合文本又不会显得过于紧凑。

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