What is GestureDetector?
- Flutter course
- Beginner
- Lesson 51/99
- 4 min
Learn to catch tap events with GestureDetector.
What is GestureDetector?
GestureDetector is a widget that listens to gestures such as tap, double tap and long press on its child. It has no visual effect of its own; it just wraps the widget you pass as child and captures the gestures performed on it. When a gesture happens, the callback you provided is called.
GestureDetector(
onTap: () {
print('Tapped');
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
)The child parameter
GestureDetector listens to gestures performed on the widget passed as child. Without child there is no area to listen on, so child is almost always provided. The larger the child, the larger the touch area.
GestureDetector(
onTap: () => print('Tap'),
child: Text('Tap here'),
)Practice Write the onTap callback
Write a function named tapHandler. When called it should print Tapped. In main call this function and wire it as onTap of the GestureDetector.
Starter code
import 'package:flutter/material.dart';
// dokunmaOlayi adinda bir fonksiyon yaz.
// Cagrilinca "Dokunuldu" metnini yazdirmali.
void main() {
// dokunmaOlayi fonksiyonunu cagir
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 parametresini dokunmaOlayi fonksiyonuna bagla
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void dokunmaOlayi() {
print('Dokunuldu');
}
void main() {
dokunmaOlayi();
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: dokunmaOlayi,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
);
}
}Expected output
Dokunuldu
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Does GestureDetector itself produce a visual effect?
- Yes, it hides the child widget
- Yes, it draws a border around it
- No, it only listens to gestures Correct answer
- Yes, it changes the background color
Explanation: GestureDetector is invisible; it makes no visual change. It only wraps the child and listens to gestures.
2 Add the onTap parameter
GestureDetector(
child: Container(
width: 80,
height: 80,
color: Colors.red,
),
____: () => print('Merhaba'),
)GestureDetector(
child: Container(
width: 80,
height: 80,
color: Colors.red,
),
onTap: () => print('Merhaba'),
)Explanation: In GestureDetector the single tap callback is given with the onTap parameter.
3 GestureDetector parts
| Term | Meaning |
|---|---|
GestureDetector |
Listens to tap gestures |
onTap |
Single tap callback |
child |
The widget on which gestures are listened |
callback |
Function called when the event happens |