Gesture detection and touch event handling
How do I add GestureRecognizers to a widget in Flutter?
In Xamarin.Forms, Element
s might contain a click event you can attach to. Many elements also contain a Command
that is tied to this event. Alternatively you would use the TapGestureRecognizer
. In Flutter there are two very similar ways:
-
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 new RaisedButton( onPressed: () { print("click"); }, child: new 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 new Scaffold( body: new Center( child: new GestureDetector( child: new FlutterLogo( size: 200.0, ), onTap: () { print("tap"); }, ), )); } }
How do I handle other gestures on widgets?
In Xamarin.Forms you would add a GestureRecognizer
to the VisualElement
. You would normally be limited to TapGestureRecognizer
, PinchGestureRecognizer
and PanGestureRecognizer
, unless you built your own.
In Flutter, 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 the `onTapDown` 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 = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
}
class SampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new GestureDetector(
child: new RotationTransition(
turns: curve,
child: new FlutterLogo(
size: 200.0,
)),
onDoubleTap: () {
if (controller.isCompleted) {
controller.reverse();
} else {
controller.forward();
}
},
),
));
}
}