How to detect triple taps with RawGestureDetector

Have you ever wanted to detect a triple-tap gesture on your widgets?

GestureDetector doesn't support this, but can we create a TripleTapDetector?

Thanks to RawGestureDetector, we can implement a TripleTapDetector.

TripleTapDetector with RawGestureDetector

Here's how it works:

register a SerialTapGestureRecognizer
use the onSerialTapDown callback
check if three taps have been made

Source Code

Here's the full implementation:

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

class TripleTapDetector extends StatelessWidget {
  const TripleTapDetector({
    super.key,
    required this.child,
    required this.onTripleTap,
  });
  final Widget child;
  final VoidCallback onTripleTap;

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: {
        SerialTapGestureRecognizer:
            GestureRecognizerFactoryWithHandlers<SerialTapGestureRecognizer>(
          () => SerialTapGestureRecognizer(),
          (SerialTapGestureRecognizer instance) {
            instance.onSerialTapDown = (SerialTapDownDetails details) {
              if (details.count == 3) {
                onTripleTap();
              }
            };
          },
        ),
      },
      child: child,
    );
  }
}