Guide to Flutter for Android Developers: Gesture Listening and Touch event handling

1. How to add a click listener to a Widget in Flutter?

In Android, you can add a click listener to a View like a button by calling the setOnClickListener method.

There are two ways to add a touch listener to Flutter:

1.1 If the Widget supports event listening, pass it a method and handle the event in the method. For example, RaisedButton has an onPressed argument:

@override
Widget build(BuildContext context) {
  return ElevatedButton(
      onPressed: () {
        print("click");
      },
      child: Text("Button"));
}
Copy the code

1.2 If the Widget does not support event listening, wrap the Widget in a GestureDetector and pass a method 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"); },),)); }}Copy the code

2. How do I handle other gestures on widgets?

Use GestureDetector to listen for a wide range of gestures, such as:

  • Tap

    • OnTapDown – A pointer that may generate a click event to touch a specific location on the screen.

    • OnTapUp – A pointer that generates a click event to stop touching the screen at a specific location.

    • OnTap – A click event has occurred.

    • OnTapCancel – A pointer that previously triggered an onTapDown event will not generate a click event.

  • Double tap

    • OnDoubleTap – The user clicks twice in quick succession on the same location on the screen.

  • Long press

    • OnLongPress – The pointer remains touched at the same location on the screen for an extended period of time.

  • Vertical drag

    • OnVerticalDragStart – The pointer has touched the screen and may start moving vertically.

    • OnVerticalDragUpdate – Touch screen pointer moves more distance in vertical direction.

    • OnVerticalDragEnd – The pointer that touched the screen and moved vertically does not touch the screen anymore and moves at a certain speed when it stops touching the screen.

  • Horizontal drag

    • OnHorizontalDragStart – The pointer has touched the screen and may start moving horizontally.

    • OnHorizontalDragUpdate – Touch the screen pointer to move more distance horizontally.

    • OnHorizontalDragEnd – The pointer that touched the screen and moved horizontally will no longer touch the screen and move at a certain speed when it stops touching the screen.

The following example shows a GestureDetector that implements double clicking on the rotating Flutter flag:

import 'package:flutter/material.dart';

void main() {
  runApp(SampleApp());
}

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App', theme: ThemeData( primarySwatch: Colors.blue, ), home: SampleAppPage(), ); }}class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage>
    with TickerProviderStateMixin {
  AnimationController controller;
  CurvedAnimation curve;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  @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(); }},),)); }}Copy the code