Gesture detection and touch event handling
Domains:
Flutter
How do I add an onClick listener to a widget in Flutter?
In Android, you can attach onClick to views such as button by calling the method setOnClickListener
.
In Flutter there are two ways of adding touch listeners:
-
If the Widget supports event detection, pass a function to it and handle it in the function. For example, the RaisedButton has an
onPressed
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 the GestureDetector, you can listen to a wide range of Gestures such as:
-
Tap
-
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 tap
-
onDoubleTap
- The user tapped the screen at the same location twice in quick succession.
-
-
Long press
-
onLongPress
- A pointer has remained in contact with the screen at the same location for a long period of time.
-
-
Vertical drag
-
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 drag
-
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 and was moving at a specific velocity when it stopped contacting 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