Flutter：如何自定义ElevatedButton阴影（居中/增大模糊扩散）

默认的ElevatedButton阴影是Material Design标准样式，偏移固定向下，无法通过elevation直接调整偏移、模糊度和扩散范围。要实现居中阴影并自定义参数，最简单的方式是关闭按钮自带阴影，用Container包裹并添加自定义BoxShadow：

Container(
  // 自定义阴影配置
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(35), // 和按钮圆角保持一致
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5), // 阴影颜色，可调整透明度
        offset: Offset(0, 0), // 阴影居中，x/y偏移都设为0
        blurRadius: 15, // 模糊度，数值越大阴影越柔和
        spreadRadius: 5, // 扩散范围，数值越大阴影覆盖区域越宽
      ),
    ],
  ),
  child: ElevatedButton(
    onPressed: () {},
    child: Text("Button 2"),
    style: ElevatedButton.styleFrom(
      primary: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(35),
      ),
      elevation: 0, // 关闭按钮自带的默认阴影
      minimumSize: Size(120, 58),
    ),
  ),
)

参数说明 #

• offset: Offset(0,0)：将阴影的偏移量设为0，实现居中效果，默认是向下偏移Offset(0, elevation)
• blurRadius：控制阴影的模糊程度，可根据需求调整数值（比如10-20区间）
• spreadRadius：控制阴影的扩散范围，数值越大阴影会向四周扩展得越远
• color：可根据主题调整阴影颜色和透明度，比如Colors.black.withOpacity(0.3)

如果需要多层阴影效果，直接在boxShadow数组里添加多个BoxShadow即可。

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