如何创建带有光泽效果的圆角ElevatedButton？附现有实现代码

要做出图里的带光泽圆角按钮，给你两种简单可行的方案：

方案一：用Container包裹ElevatedButton #

给外层Container加渐变背景，内部ElevatedButton设透明背景，就能模拟出光泽感：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    // 从上到下的渐变，顶部浅色做高光，底部深色压暗
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.blue.shade300, Colors.blue.shade700],
    ),
    // 加个阴影增强立体感
    boxShadow: [
      BoxShadow(
        color: Colors.blue.shade900.withOpacity(0.3),
        blurRadius: 4,
        offset: Offset(0, 2),
      ),
    ],
  ),
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.transparent,
      shadowColor: Colors.transparent,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      padding: EdgeInsets.symmetric(horizontal: 32, vertical: 12),
    ),
    onPressed: () {},
    child: Text(
      '按钮文本',
      style: TextStyle(color: Colors.white, fontSize: 16),
    ),
  ),
)

方案二：直接自定义ButtonStyle #

不用额外嵌套Container，直接给ElevatedButton的背景用渐变，还能适配按钮的按压状态：

ElevatedButton(
  style: ButtonStyle(
    shape: MaterialStateProperty.all(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
    ),
    backgroundColor: MaterialStateProperty.resolveWith((states) {
      // 按压时换深一点的渐变，提升交互反馈
      if (states.contains(MaterialState.pressed)) {
        return LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.blue.shade400, Colors.blue.shade800],
        );
      }
      return LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [Colors.blue.shade300, Colors.blue.shade700],
      );
    }),
    overlayColor: MaterialStateProperty.all(Colors.white.withOpacity(0.2)),
    padding: MaterialStateProperty.all(
      EdgeInsets.symmetric(horizontal: 32, vertical: 12),
    ),
  ),
  onPressed: () {},
  child: Text(
    '按钮文本',
    style: TextStyle(color: Colors.white, fontSize: 16),
  ),
)

小提示： #

• 光泽感核心就是从上到下的线性渐变，顶部浅色模拟高光，底部深色增强质感，你可以根据自己的需求调整颜色值
• 如果想要更灵动的光泽，比如斜向的高光条，可以试试用RadialGradient或者自定义CustomPaint画一层高光

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