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:

  1. 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"));
    }
    
  2. 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();
              }
            },
        ),
    ));
  }
}

Similar pages

Page structure
Terms

Widget

Flutter

StatelessWidget

Gesture detection and touch event handling

Touch listeners