onTap and onDoubleTap

Learn the difference between onTap and onDoubleTap.

onTap and onDoubleTap

onTap is called when the user taps the widget once. onDoubleTap is called when the user taps twice in quick succession. You can provide both in the same GestureDetector; Flutter resolves which gesture occurred and calls the right callback.

GestureDetector(
  onTap: () => print('Single'),
  onDoubleTap: () => print('Double'),
  child: Container(width: 80, height: 80),
)

Waiting time

If both onTap and onDoubleTap are provided, Flutter waits briefly to decide whether the tap is single or double. Therefore onTap may be called with a slight delay compared to using it alone. If you provide only onTap, there is no such delay.

Exercise Wire onTap and onDoubleTap

Write a function singleTap that prints Single. Write another function doubleTap that prints Double. In main call singleTap and wire both onTap and onDoubleTap of the GestureDetector.

Show example solution

import 'package:flutter/material.dart';

void tekDokunus() {
  print('Tek');
}

void ciftDokunus() {
  print('Cift');
}

void main() {
  tekDokunus();
  runApp(const Uygulama());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: GestureDetector(
            onTap: tekDokunus,
            onDoubleTap: ciftDokunus,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ),
        ),
      ),
    );
  }
}

Test yourself

What happens if you provide both onTap and onDoubleTap in one GestureDetector?
- Gives a compile error, both cannot be given at once
- Only onTap is called, onDoubleTap is ignored
- Flutter resolves which gesture occurred and calls the appropriate callback
- Only onDoubleTap is called, onTap is ignored
Show answer

Flutter resolves which gesture occurred and calls the appropriate callback — Flutter detects whether the tap is single or double and calls only the appropriate callback. Both can be used together.

Add the onDoubleTap parameter

GestureDetector(
  onTap: () => print('Tek'),
  ____: () => print('Cift'),
  child: Text('X'),
)

Show answer

GestureDetector(
  onTap: () => print('Tek'),
  onDoubleTap: () => print('Cift'),
  child: Text('X'),
)

Tap callbacks

onTap

Single tap
onDoubleTap

Double tap
callback

Function called when event happens
child

The widget on which gestures are listened

Next lesson: onLongPress

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies