Ripple effect not working with when wrapping a Card in InkWell

Question

After doing a bit of research, I tried to wrap ListTiles with InkWell to get the onTap ripple effect, but it doesn't seem to work. This is what I have:

return AnimationLimiter(
      child: Scrollbar(
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: widget.myItems.length,
          itemBuilder: (context, index) => AnimationConfiguration.staggeredList(
            position: index,
            duration: const Duration(milliseconds: 300),
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: Material(
                  /// child: Ink( also tried with Ink and no Ink and no Material just InkWell but no ripple
                  child: InkWell(
                    onTap: () => widget.nav(widget.myItems[index]),
                    splashColor: Colors.red,
                    child: Card(   
                      child: _itemTile(index),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );

The ListTile:

  return ListTile(
      dense: true,
      trailing: Icon(Icons.keyboard_arrow_right),
      leading: category,
      title: Text(
        item.title,
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
      ),
    );

I managed to get the ripple effect working by doing onTap: () => {} to the InkWell. But after adding the GestureDetector, the Ripple is gone again.

             child: InkWell(
                borderRadius: BorderRadius.circular(8),
                onTap: () {},
                splashColor: Colors.red,
                child: GestureDetector(
                  onTap: () => widget.nav(widget.myItems[index]),
                  child: _itemTile(index),
                ),
              ),

I even tried this, ripple works, but it the widget.nav function doesn't get called:

Stack(
              children: [
                Card(
                  elevation: 1,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                  margin:
                      EdgeInsets.only(bottom: 5.0, left: 2.0, right: 2.0),
                  child: GestureDetector(
                    onTap: () {
                      widget.nav(widget.myItems[index]);
                    },
                    child: _itemTile(index),
                  ),
                ),
                Positioned.fill(
                  child: Material(
                    color: Colors.transparent,
                    child: InkWell(
                      onTap: () => {},
                    ),
                  ),
                )
              ],
            ),

Edit* Adding the nav function:

_navToItem(item) {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => Item(
        items: _activityItems.length > 0 ? _activityItems : _items,
        showAd: false,
        user: userStream,
        item: item,
        favorites: _favorites,
      ),
    ),
  );
}

Answer 1

ListTile has a ripple effect by default, so you shouldn't need to add an inkwell. If there isn't a ripple, one of the children is probably causing some issues. Try removing some and see if that helps.

Example