Ripple effect does work for long press in List tile

Question

I wrapped List tile widget with gesture widget because I want to execute some code on onLongPressStart and onLongPressEnd Call back. But due to this the ripple effect does not work in case of longpress. It work file for simple tap. When I remove these call back from gesture widget the ripple effect works. How can I fix this issue?

Here is example of what I am doing:

GestureDetector(

                    onLongPressStart: (value){
                      //do something
                    },
                    onLongPressEnd: (value){
                      //do something
                    },
                    child: ListTile(
                      title: Text("Title"),
                      onTap: (){
                        // do something
                      },
                    ),
                  ),

Answer 1

InkRipple did the trick for me. Here is the code

class PressRipple extends StatefulWidget {
    final Widget child;
    final VoidCallback onPress;

    PressRipple({
        Key key,
        this.child,
        @required this.onPress,
    }) : assert(onPress != null), super(key: key);

    @override
    _PressRippleState createState() => _PressRippleState();
}

class _PressRippleState extends State<PressRipple> {
    InteractiveInkFeature _inkFeature;

    @override
    Widget build(BuildContext context) {
        return GestureDetector(
            behavior: HitTestBehavior.opaque,
        onTapDown: (d) {
        _inkFeature = InkRipple(
            position: d.localPosition,
        color: Colors.green,
        controller: Material.of(context),
        referenceBox: context.findRenderObject(),
        textDirection: TextDirection.ltr,
        containedInkWell: true,
        );
        widget.onPress();
    },
        onTapUp: (d) {
        _inkFeature.dispose();
    },
        child: widget.child,
        );
    }
}

And Then use it like this

SizedBox(
      width: 200,
      height: 200,
      child: Material(
        color: Colors.grey,
        child: PressRipple(
          onPress: () {
            print('on press callback');
          },
        ),
      ),
    ),

Thanks @pskink for help

Answer 2

Maybe you can use this structure. Long press triggers "splash color" and gives color. If you keep the opacity of the color in the "container" field low, the "splash color" will not be lost.

InkWell(
    splashColor: Colors.blue,
    onTap: () {
        print('Clicked');
    },
    child: Container(
        color: Colors.grey.withOpacity(0.2),
        child: ListTile(
            title: Text('Text'),
        ),
    ),
)