Gesture detection and touch event handling

Domains: Flutter

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

Similar pages

Page structure
Terms

Widget

Flutter

StatelessWidget

Touch listeners

Gesture detection and touch event handling