Inkwell changes my widget background color to the splash color after doing a fast double tap directly after a tap, the splash starts to get bigger slowly until it fills the widget container, and then it stays as the widget's background color.

To activate this problem, just set onDoubleTap function for the inkwell and perform a tap on the widget then after half a second, perform a double tap on that widget, you will see the splash getting bigger and bigger slowly until it fills the container and then stay there.

This is how the widget background color should be

after double tap, after half a second of a tap, the splash starts to get bigger slowly

the splash fills the container and then stays there as the background of the widget even after hover on the widget again

even if you perform this again, the splash color gets darker as I believe that because of the adding up of two splash with opacity .8

Video to show the problem: https://youtu.be/s9pOIeVE2ck

The question is how to stop this unexpected effect.

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      width: width,
      decoration: decoration,
      alignment: alignment,
      margin: margin,
      child: Material(
        borderRadius: BorderRadius.circular(borderRadius),
        clipBehavior: Clip.hardEdge,
        color: Colors.transparent,
        shape: shapeBorder,
        child: InkWell(
          highlightColor: Colors.yellow.withOpacity(0.3),
          splashColor: Colors.red.withOpacity(0.8),
          focusColor: Colors.green.withOpacity(0.0),
          hoverColor: Colors.blue.withOpacity(0.8),
          onTap: onTap,
          onDoubleTap: onDoubleTap,
          onLongPress: onLongPress,
          onTapCancel: () {
            print('tap cancel');
          },
          canRequestFocus: false,
          enableFeedback: false,
          borderRadius: BorderRadius.circular(borderRadius),
          child: Container(
              padding: surroundInkEdge ?? EdgeInsets.all(borderRadius),
              height: height,
              width: width,
              alignment: alignment,
              child: child),
        ),
      ),
    );
  }

CodePudding user response：

This is a known bug on all stable versions of Flutter up to the latest version 3.0.5 at the time of this writing. It has been already fixed on master branch tough.

The problem is with the onDoubleTab property. If you don't actually need to listen to it just remove it and all works fine.