Flutter中Expanded嵌套的Container套TextButton后尺寸缩小如何解决

这个现象是Flutter中TextButton的默认属性导致的，核心有两点：

• TextButton默认自带EdgeInsets.symmetric(horizontal: 16, vertical: 8)的内边距，会挤压内部Container的可用空间
• TextButton默认不会主动撑满父级Expanded分配的最大可用空间，只会贴合内部子元素（对应你的Icon）的尺寸，而你没有给Container设置宽高约束，所以Container就随Icon大小同步缩小了

只需要调整TextButton的默认样式，同时给内部Container增加撑满约束即可，修改后的代码如下：

Expanded(
  child: TextButton(
    onPressed: () {  },
    // 新增style配置，移除TextButton默认的边距和尺寸限制
    style: TextButton.styleFrom(
      padding: EdgeInsets.zero,
      minimumSize: Size.zero,
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ),
    child: Container(
      // 新增宽高约束，让Container撑满父级TextButton的可用空间
      width: double.infinity,
      height: double.infinity,
      child: Icon(FontAwesomeIcons.divide, size: 50,),
      decoration: BoxDecoration(
        color: Color(0xFFFCACC9),
        shape: BoxShape.circle
      ),
    ),
  ),
),

如果你不需要保留TextButton的默认水波纹点击效果，也可以直接用GestureDetector替换TextButton，不需要额外配置样式就能直接撑满Expanded的空间。

内容的提问来源于stack exchange，提问作者Samuella M. Aglago