Gesture detection and touch event handling
Domains:
Flutter
How do I add a click listener to a widget in Flutter?
In iOS, you attach a GestureRecognizer
to a view to handle click events. In Flutter, there are two ways of adding touch listeners:
-
If the widget supports event detection, pass a function to it, and handle the event in the function. For example, the
RaisedButton
widget has anonPressed
parameter:@override Widget build(BuildContext context) { return RaisedButton( onPressed: () { print("click"); }, child: Text("Button"), ); }
-
If the Widget doesn’t support event detection, wrap the widget in a GestureDetector and pass a function to the
onTap
parameter.class SampleApp extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: GestureDetector( child: FlutterLogo( size: 200.0, ), onTap: () { print("tap"); }, ), ), ); } }
How do I handle other gestures on widgets?
Using GestureDetector
you can listen to a wide range of gestures such as:
-
Tapping
-
onTapDown
— A pointer that might cause a tap has contacted the screen at a particular location. -
onTapUp
— A pointer that triggers a tap has stopped contacting the screen at a particular location. -
onTap
— A tap has occurred. -
onTapCancel
— The pointer that previously triggered theonTapDown
won’t cause a tap.
-
-
Double tapping
-
onDoubleTap
— The user tapped the screen at the same location twice in quick succession.
-
-
Long pressing
-
onLongPress
— A pointer has remained in contact with the screen at the same location for a long period of time.
-
-
Vertical dragging
-
onVerticalDragStart
— A pointer has contacted the screen and might begin to move vertically. -
onVerticalDragUpdate
— A pointer in contact with the screen has moved further in the vertical direction. -
onVerticalDragEnd
— A pointer that was previously in contact with the screen and moving vertically is no longer in contact with the screen and was moving at a specific velocity when it stopped contacting the screen.
-
-
Horizontal dragging
-
onHorizontalDragStart
— A pointer has contacted the screen and might begin to move horizontally. -
onHorizontalDragUpdate
— A pointer in contact with the screen has moved further in the horizontal direction. -
onHorizontalDragEnd
— A pointer that was previously in contact with the screen and moving horizontally is no longer in contact with the screen.
-
The following example shows a GestureDetector
that rotates the Flutter logo on a double tap:
AnimationController controller;
CurvedAnimation curve;
@override
void initState() {
controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
}
class SampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
child: RotationTransition(
turns: curve,
child: FlutterLogo(
size: 200.0,
)),
onDoubleTap: () {
if (controller.isCompleted) {
controller.reverse();
} else {
controller.forward();
}
},
),
),
);
}
}
Similar pages
Page structure
Terms