single_tap_detector 1.0.1

A Flutter widget that prevents multiple rapid taps by implementing debounce protection. Perfect for preventing multiple navigation screens from opening on rapid user taps.

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SingleTapDetector Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _navigationCount = 0;

  void _navigateToNextScreen() {
    setState(() {
      _navigationCount++;
    });

    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => NextScreen(count: _navigationCount),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SingleTapDetector Demo'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text(
              'Try tapping these buttons multiple times quickly:',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 20),

            // Example 1: Card with SingleTapDetector
            const Text('1. Card with SingleTapDetector:',
                style: TextStyle(fontWeight: FontWeight.w600)),
            const SizedBox(height: 8),
            SingleTapDetector(
              onTap: _navigateToNextScreen,
              child: Card(
                child: ListTile(
                  leading: const Icon(Icons.touch_app),
                  title: const Text('Tap this card'),
                  subtitle: const Text('Multiple taps will be blocked'),
                ),
              ),
            ),
            const SizedBox(height: 20),

            // Example 2: Button with SingleTapDetector
            const Text('2. Button with SingleTapDetector:',
                style: TextStyle(fontWeight: FontWeight.w600)),
            const SizedBox(height: 8),
            SingleTapDetector(
              onTap: _navigateToNextScreen,
              child: ElevatedButton(
                onPressed: null, // Disable default onPressed
                child: const Text('Tap this button'),
              ),
            ),
            const SizedBox(height: 20),

            // Example 3: Custom debounce duration
            const Text('3. Custom debounce (2 seconds):',
                style: TextStyle(fontWeight: FontWeight.w600)),
            const SizedBox(height: 8),
            SingleTapDetector(
              debounceDuration: const Duration(seconds: 2),
              onTap: _navigateToNextScreen,
              child: Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.orange,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: const Text(
                  'Tap me (2s debounce)',
                  style: TextStyle(
                      color: Colors.white, fontWeight: FontWeight.bold),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            const SizedBox(height: 30),

            // Navigation counter
            Container(
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: BorderRadius.circular(8),
              ),
              child: Column(
                children: [
                  const Text('Navigation Count:',
                      style: TextStyle(fontWeight: FontWeight.w600)),
                  Text(
                    '$_navigationCount',
                    style: const TextStyle(
                        fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  const Text('(This should only increment once per tap)'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class NextScreen extends StatelessWidget {
  final int count;

  const NextScreen({super.key, required this.count});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen #$count'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.check_circle, size: 64, color: Colors.green),
            const SizedBox(height: 16),
            Text(
              'Navigation #$count successful!',
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            const Text(
                'If you tapped multiple times quickly, you should only see this screen once.'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }
}