onTap and onDoubleTap
- Flutter course
- Beginner
- Lesson 52/99
- 4 min
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.
Practice 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.
Starter code
import 'package:flutter/material.dart';
// 1. tekDokunus fonksiyonunu yaz: "Tek" yazdirsin
// 2. ciftDokunus fonksiyonunu yaz: "Cift" yazdirsin
// 3. main icinde tekDokunus'u cagir
// 4. GestureDetector'a onTap ve onDoubleTap bagla
void main() {
// tekDokunus cagrisini ekle
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 ve onDoubleTap parametrelerini ekle
child: Container(
width: 100,
height: 100,
color: Colors.green,
),
),
),
),
);
}
}Sample 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,
),
),
),
),
);
}
}Expected output
Tek
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 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 Correct answer
- Only onDoubleTap is called, onTap is ignored
Explanation: Flutter detects whether the tap is single or double and calls only the appropriate callback. Both can be used together.
2 Add the onDoubleTap parameter
GestureDetector(
onTap: () => print('Tek'),
____: () => print('Cift'),
child: Text('X'),
)GestureDetector(
onTap: () => print('Tek'),
onDoubleTap: () => print('Cift'),
child: Text('X'),
)Explanation: The double tap callback is given with the onDoubleTap parameter; no other name works.
3 Tap callbacks
| Term | Meaning |
|---|---|
onTap |
Single tap |
onDoubleTap |
Double tap |
callback |
Function called when event happens |
child |
The widget on which gestures are listened |