设置透明后InkWell仍显示水波纹颜色问题求助

你遇到的问题核心在于：外层InkWell的交互效果被内部嵌套的TextButton覆盖了。TextButton本身自带Material设计的墨水波纹和高亮效果，所以即使你给外层InkWell设置了透明色，实际显示的是TextButton自身的交互反馈，导致外层设置失效。

下面给你两种可行的解决方案：

方案一：移除TextButton，直接用InkWell包裹Text #

如果不需要TextButton的样式，直接将TextButton替换为普通Text，把点击逻辑合并到InkWell的onTap中：

return InkWell(
  overlayColor: WidgetStateColor.transparent,
  splashColor: Colors.transparent,
  highlightColor: Colors.transparent,
  onTap: () {
    handleTap();
    incrementCounter(); // 合并两个点击逻辑
  },
  child: Container(
    width: 200,
    height: 40, // 建议调高高度，确保点击区域足够触发交互
    child: Center(
      child: Text(
        '${scrambles[counter % scrambles.length]}',
        style: const TextStyle(color: Colors.white, fontSize: 18),
      ),
    ),
  ),
);

方案二：保留TextButton，关闭其自身的墨水效果 #

如果必须保留TextButton，需要单独关闭它的交互反馈效果，同时外层InkWell的设置可以保留：

return InkWell(
  overlayColor: WidgetStateColor.transparent,
  splashColor: Colors.transparent,
  highlightColor: Colors.transparent,
  onTap: handleTap,
  child: Container(
    width: 200,
    height: 40, // 调整高度避免点击区域过小
    child: Center(
      child: TextButton(
        onPressed: incrementCounter,
        // 关闭TextButton自身的墨水波纹和高亮
        style: TextButton.styleFrom(
          splashFactory: NoSplash.splashFactory,
          overlayColor: MaterialStateProperty.all(Colors.transparent),
        ),
        child: Text(
          '${scrambles[counter % scrambles.length]}',
          style: const TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
    ),
  ),
);

另外注意你原代码中Container高度设为10，这个高度过小可能导致点击区域异常，建议调整到合理数值（比如40），确保交互能正常触发。

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