Tap is perceived as vertical drag when having hardcoded swipe gesture

Question

I have 1 Gesture Detector that wraps 10 different cards and it allows swiping them. Each card has 3 on tap Gesture Detectors(buttons basically). Swipe works as expected but first 6 cards don't trigger the tap action when tapped (Gesture Arena tells me horizontal drag is fighting vertical drag -> so the tap gesture is perceived as vertical drag).

I find it Strange that the last 4 cards trigger on tap and swipe works perfect

I've tried changing GestureDetectors to InkWell but it didn't work out.

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onHorizontalDragStart: _onHorizontalDragStart,
      onHorizontalDragUpdate: _onHorizontalDragUpdate,
      onHorizontalDragEnd: _onHorizontalDragEnd,
      behavior: HitTestBehavior.translucent,
      child: Stack(
      children: _buildCards(),
    ),
    );
  }

List<Widget> _buildCards() {
        return [
          _buildCard(0, 10, scrollPercent),
          _buildCard(1, 10, scrollPercent),
          _buildCard(2, 10, scrollPercent),
          _buildCard(3, 10, scrollPercent),
          _buildCard(4, 10, scrollPercent),
          _buildCard(5, 10, scrollPercent),
          _buildCard(6, 10, scrollPercent),
          _buildCard(7, 10, scrollPercent),
          _buildCard(8, 10, scrollPercent),
          _buildCard(9, 10, scrollPercent),
        ];
      }

Widget _buildCard(int cardIndex, int cardCount, double scrollPercent) {
    final cardScrollPercent = scrollPercent / (1 / cardCount);
    final parallax = scrollPercent - (cardIndex / cardCount);

    return FractionalTranslation(
      translation: Offset(cardIndex - cardScrollPercent, 0.0),
      child: Transform(
        transform: _buildCardProjection(cardScrollPercent - cardIndex),
              child: card1(parallax, cardIndex
        ),
      )
      );
  }

Card1 is appealed last and it represents the card itself.. Here is the code for the onTap property of GestureDetector of Card1

onTap: () {
 showDialog(
    context: context,
    builder: (BuildContext context) => CustomDialog(
       title: "Title",
       description:"Test",
       buttonText: "Okay",
  ),

); },

Answer 1

It sounds like you might be interested in replacing your setup with a PageView widget. It uses a PageController to manage the swipe gestures. Check out the video on it Widget of the Week - PageView