Gesture detection and touch event handling

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:

1. If the widget supports event detection, pass a function to it, and handle the event in the function. For example, the RaisedButton widget has an onPressed parameter:

   		@override
   Widget build(BuildContext context) {
     return RaisedButton(
       onPressed: () {
         print("click");
       },
       child: 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 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 the onTapDown 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();
            }
          },
        ),
      ),
    );
  }
}