Gesture detection and touch event handling

Domains: Flutter

How do I add GestureRecognizers to a widget in Flutter?

In Xamarin.Forms, Elements 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:

`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();
              }
            },
        ),
    ));
  }
}