如何设置ElevatedButton按下时的阴影效果为完全透明？

ElevatedButton的样式默认适配多种交互状态（默认、按下、聚焦、悬停、禁用），你之前单独设置elevation、阴影色仅覆盖了默认状态，交互态的对应属性仍保留默认值，因此会出现按压时的多余阴影。

完整实现代码 #

所有状态下阴影完全透明的按钮实现如下：

import 'package:flutter/material.dart';

ElevatedButton(
  style: ButtonStyle(
    // 所有状态下的按钮高度都设为0，消除阴影生成基础
    elevation: MaterialStateProperty.all(0),
    // 所有状态下的阴影颜色设为完全透明，双重保险避免残留
    shadowColor: MaterialStateProperty.all(Colors.transparent),
    // 如需保留按下高亮反馈，可删除下面这行overlayColor配置
    overlayColor: MaterialStateProperty.all(Colors.transparent),
    // 你的自定义形状可直接在此配置，比如自定义圆角/切角
    shape: MaterialStateProperty.all(
      RoundedRectangleBorder(borderRadius: BorderRadius.circular(12))
    ),
    // 若按钮为纯图片展示，可将背景色设为透明
    backgroundColor: MaterialStateProperty.all(Colors.transparent),
  ),
  onPressed: () {
    // 你的点击逻辑
  },
  child: Image.asset(
    'assets/mypic.png',
    // 若图片有圆角，可加裁切属性匹配按钮形状
    clipBehavior: Clip.hardEdge,
  ),
)

补充说明 #

• 若仍有边角阴影残留，检查按钮shape配置和子组件的裁切逻辑是否匹配，保持二者形状一致即可完全消除异常阴影
• 该配置覆盖了所有交互状态的阴影相关属性，适配禁用、悬停、聚焦等全场景，无遗漏

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