Gesture detection and touch event handling

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:

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