How to have a callback function called onTap, another onTapDown, and another onTapUp without overlap?

Question

I have this UI: When user taps on right side we go to the next story, left we go to previous and holding down anywhere should stop the automatic loading on top. I am currently using GestureDetectors and using the three callbacks

• onTap To go to next or previous story
• onTapDown To pause the loader
• onTapUp To resume the loader

The problem is onTap gets called with onTapUp so when I try to pause for example by holding down on the right side, it would immediately go to the next story after I lift my finger.

Answer 1

Let's try the below solution, I tested it and it works quite well in your case.

Below is a custom GestureDetector widget that allows us to set the duration for onLongPressStart and onLongPressEnd

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

class CustomGestureLongPress extends StatelessWidget {
  final Widget? child;
  final Duration duration;
  final GestureLongPressStartCallback onLongPressStart;
  final GestureLongPressEndCallback onLongPressEnd;
  final VoidCallback? onLongPress;

  const CustomGestureLongPress({
    super.key,
    this.child,
    required this.duration,
    required this.onLongPressStart,
    required this.onLongPressEnd,
    this.onLongPress,
  });

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      behavior: HitTestBehavior.translucent,
      gestures: <Type, GestureRecognizerFactory>{
        LongPressGestureRecognizer: GestureRecognizerFactoryWithHandlers<LongPressGestureRecognizer>(
              () => LongPressGestureRecognizer(duration: duration), (instance) {
                instance.onLongPress = () {
                  print("Parent onLongPress");
                  onLongPress?.call();
                };
                instance.onLongPressStart = (details) {
                  print("Parent onLongPressStart");
                  onLongPressStart.call(details);
                };
                instance.onLongPressEnd = (details) {
                  print("Parent onLongPressEnd");
                  onLongPressEnd.call(details);
                };
              },
        ),
      },
      child: child,
    );
  }
}`

And the usage of the custom widget

CustomGestureLongPress(
            duration: const Duration(milliseconds: 200),
            onLongPressStart: (_) {
              //TODO Pause the loader
            },
            onLongPressEnd: (_) {
              //TODO Resume the loader
            },
            child: Stack(
                children: [
                  GestureDetector(
                    onTap: () {
                      //TODO Go to previous story
                    },
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Container(
                        width: 50.w,
                        color: Colors.transparent,
                      ),
                    )
                  ),
                  GestureDetector(
                    onTap: () {
                      //TODO Go to next story
                    },
                    child: Align(
                      alignment: Alignment.centerRight,
                      child: Container(
                        width: 50.w,
                        color: Colors.transparent,
                      ),
                    )
                  )
                ]
            ),
          )