如何让ElevatedButton内Column的子Container占满按钮全宽

问题原因 #

ElevatedButton属于Material Design风格组件，默认自带内边距约束，会限制子组件的可用宽高，因此即便给内部Column设置CrossAxisAlignment.stretch也无法撑满按钮整体宽度。

解决方法 #

在ElevatedButton的ButtonStyle配置中添加padding属性，将其值设为EdgeInsets.zero即可移除默认内边距，让子组件可以占用按钮全部空间。

修改后核心代码示例 #

Card(
  elevation: 20,
  shadowColor: Colors.green,
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(
      Radius.circular(15),
    ),
  ),
  child: ElevatedButton(
    style: ButtonStyle(
      // 新增这一行移除按钮默认内边距
      padding: MaterialStateProperty.all(EdgeInsets.zero),
      shape: MaterialStateProperty.all(
        const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(15),
          ),
        ),
      ),
      shadowColor: MaterialStateProperty.all(Colors.green),
      backgroundColor: MaterialStateProperty.all(Colors.red),
    ),
    onPressed: () {
      Navigator.push(
        c,
        MaterialPageRoute(builder: (c) => route),
      );
    },
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.min,
      children: [
        ClipRRect(
          borderRadius: const BorderRadius.only(topRight: Radius.circular(15), topLeft: Radius.circular(15)),
          child: Container(
            height: 45,
            color: const Color.fromARGB(255, 0, 176, 44),
            child: Image.asset(
              "assets/icons/${icon}",
            ),
          ),
        ),
        // 如果需要给下方文字留内边距，可在此处加Padding组件，避免影响顶部条宽度
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          child: Text(
            label,
            style: const TextStyle(color: Colors.black),
          ),
        ),
      ],
    ),
  ),
)

补充说明 #

如果需要保留文字部分的内边距，不要在按钮层面设置padding，可直接给Text外层包裹Padding组件单独调整间距，避免破坏顶部条的全宽效果。

内容的提问来源于stack exchange，提问作者Filipe Gonçalves Ribeiro Costa