如何让Flutter的ElevatedButton按下时显示水波纹效果？

以下是针对你遇到的问题的具体修复方案：

1. 调整overlayColor的设置逻辑 #

你当前使用WidgetStateProperty.all固定了所有状态下的overlayColor，这会直接覆盖按压时的水波纹视觉效果。应该针对仅按压状态设置半透明的overlayColor，让水波纹能够正常显现：

overlayColor: WidgetStateProperty.resolveWith((states) {
  if (states.contains(WidgetState.pressed)) {
    // 降低透明度，避免完全遮挡水波纹
    return const Color.fromARGB(255, 16, 99, 167).withOpacity(0.3);
  }
  return null; // 其他状态不自定义，使用默认值
}),

2. 确认splashFactory的有效性 #

虽然你已经配置了InkRipple.splashFactory，可以尝试替换为InkSplash.splashFactory测试，排除特定水波纹工厂的兼容性问题。同时确保没有父组件的样式或主题配置覆盖了当前按钮的splashFactory设置。

3. 排查组件遮挡问题 #

检查ElevatedButton是否被Material、ClipRRect等组件包裹，且父组件的clipBehavior设置为Clip.hardEdge之类的属性，这类设置会限制水波纹的显示范围，导致视觉上看不到效果。

修复后的完整代码示例 #

ElevatedButton(
  style: ButtonStyle(
    overlayColor: WidgetStateProperty.resolveWith((states) {
      if (states.contains(WidgetState.pressed)) {
        return const Color.fromARGB(255, 16, 99, 167).withOpacity(0.3);
      }
      return null;
    }),
    splashFactory: InkRipple.splashFactory,
    backgroundColor: WidgetStatePropertyAll(
      Theme.of(context).colorScheme.primary,
    ),
  ),
  onPressed: () {
    context.read<StripeCheckoutCubit>().initiateCheckout(
        userRef: userData.selfRef,
        planRef: pricePlans.first.selfRef);
  },
  child: Text(
    'Checkout',
    style: TextStyle(
        fontSize: 17,
        color: Theme.of(context).colorScheme.onPrimary),
  ),
),

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