Advertisement
  1. Code
  2. Flutter

Cómo reaccionar a los eventos táctiles en Flutter

by
Read Time:8 minsLanguages:

Spanish (Español) translation by Manuel (you can also view the original English article)

Casi todas las aplicaciones necesitan algún tipo de entrada del usuario. Esta es una pequeña guía sobre los eventos táctiles, especialmente para los desarrolladores principiantes de Flutter.

Cuando se trata de reconocimiento de gestos y reacción a eventos táctiles, Flutter ofrece increíbles widgets para los nuevos desarrolladores. Puedes hacer que cualquier widget de tu app responda a eventos táctiles con solo envolverlo en uno de estos widgets de reconocimiento táctil.

Tanto si eres un desarrollador que acaba de aprender más sobre la gestión de eventos táctiles en Flutter, como si eres un profesional que busca un resumen rápido, este post te pondrá al día.

¿Cómo funciona el sistema de gestos?

Esencialmente, el sistema de gestos en Flutter opera en dos capas distintas. La primera capa almacena los eventos de puntero en bruto que describen los detalles físicos como la ubicación y el movimiento de los punteros en uso como los palpadores, los ratones y los toques en general.

Por encima de esto, tenemos la capa de "gestos". Ésta interpreta los movimientos del puntero como una semántica significativa y añade un contexto a los movimientos del puntero.

Glosario de eventos de toque rápido para principiantes

Los eventos táctiles no se pueden manejar a menos que se entiendan los gestos semánticos y los punteros. El puntero es el héroe en este campo. A continuación verás cómo esto es literalmente cierto.

Antes de explorar la reacción de los elementos individuales, echemos un vistazo a las características del caso:

Punteros

Los punteros representan datos brutos relacionados con la interacción del usuario con la pantalla en cuestión. Hay cuatro tipos diferentes de eventos de puntero:

  • PointerUpEvent: El puntero ha dejado de interactuar con la pantalla.
  • PointerDownEvent: El puntero está en contacto con la pantalla en un lugar específico.
  • PointerMoveEvent: El puntero se ha movido a una nueva posición en la pantalla.
  • PointerCancelEvent: La entrada de este puntero ya no se dirige a la app en curso.

Cuando se activa el PointerDownEvent, el framework examinará la aplicación para determinar el widget situado en ese punto específico del wireframe de la aplicación. El PointerDownEvent se enviará a ese widget y a los widgets situados por encima de él hasta la raíz del árbol de componentes, y lo mismo ocurrirá con cualquier evento que siga al evento de bajada en esa ruta concreta.

Gestos

Como se ha mencionado anteriormente, los gestos representan las acciones semánticas como tocar, escalar y arrastrar que se reconocen fácilmente a partir de múltiples eventos individuales que surgen de una actividad de puntero. Un solo gesto podría incorporar múltiples eventos táctiles, cada uno de los cuales manejaría un hito único del gesto, como el inicio o el final del arrastre.

Estos son los tipos de gestos más comunes que intervienen en la gestión de eventos táctiles en Flutter:

Gestos de toque

  • onTapUp: Un puntero desencadena un toque en un lugar concreto de la pantalla.
  • onTapDown: Un puntero podría causar un toque ha sido contactado en la pantalla.
  • onTap: Cuando el puntero ha disparado previamente onTapDown también dispara onTapUp, provocando un toque.
  • onTapCancel: Cuando el puntero que desencadena onTapDown no provoca un toque.

Gestos de doble toque

  • onDoubleTap: El usuario toca la pantalla en la misma posición dos veces seguidas.

Gestos de pulsación larga

  • onLongPress: Un puntero permanece en contacto con la pantalla en el mismo lugar durante un trozo de tiempo más largo.

Gestos de arrastre vertical

  • onVerticalDragStart: La pantalla de contacto del puntero para probablemente moverse verticalmente.
  • onVerticalDragEnd: Un puntero que había estado previamente en contacto con la pantalla durante un movimiento vertical termina el contacto con la pantalla con una velocidad similar a la del propio movimiento.
  • onVerticalDragUpdate: Un puntero que está en contacto con la pantalla se mueve verticalmente en la misma dirección.

Gestos de arrastre horizontal

  • onHorizontalDragStart: Un puntero entra en contacto con la pantalla para moverse potencialmente en la dirección horizontal.
  • onHorizontalDragEnd: Un puntero que antes se movía horizontalmente con contacto a la pantalla, con una velocidad específica, pierde el contacto por completo.
  • onHorizontalDragUpdate: Un puntero en contacto con la pantalla se mueve horizontalmente desde el onHorizontalDragStart.

Gestos de paneo

  • onPanStart: un puntero ha entrado en contacto con la pantalla y puede moverse potencialmente en el eje X o Y. Esta llamada de retorno conduce a un fallo cuando se ha establecido onHorizontalDragStart o onVerticalDragStart: no hay forma de que el sistema de eventos distinga entre una panorámica y un arrastre.
  • onPanEnd: un puntero que había estado en contacto con la pantalla y que se movía previamente a una velocidad determinada pierde el contacto con la pantalla. Se produce un fallo cuando la llamada de retorno se establece en onHorizontalDragEnd o en onVerticalDragEnd.
  • onPanUpdate: Un puntero que está en contacto con la pantalla y se mueve en dirección horizontal o vertical. Solo se produce un fallo cuando se activa la llamada de retorno de onHorizontalDragUpdate o de onVerticalDragUpdate.

Entender la desambiguación de los gestos

En cualquier lugar de la pantalla puede haber varios detectores de gestos. Todos ellos siguen las señales del flujo de eventos del puntero que pasan. En un intento de reconocer gestos específicos, el widget GestureDetector determina los gestos semánticos especificados según las devoluciones de llamada que se hayan establecido. Es decir, si se establece una determinada devolución de llamada en el GestureDetector, el widget tratará de interpretar los eventos del puntero en términos de ese tipo de gesto.

El marco desambigua los gestos en la arena de gestos. Cada tipo de gesto tiene un reconocedor que compite en la arena, examinando la posición del puntero y los eventos de movimiento que llegan. El reconocedor que corresponde al gesto de entrada gana siguiendo unas cuantas reglas:

  • Un reconocedor es libre de declarar su derrota en cualquier momento y abandonar la arena. Cuando solo queda un reconocedor, ¡Gana!
  • Un reconocedor puede declarar la victoria en cualquier momento y obligar a los demás a declarar la derrota.

Por ejemplo, supongamos que quieres reconocer los arrastres verticales y horizontales. Los reconocedores de cada directo entrarán en el campo de los gestos en cuanto reciban el primer evento. A continuación, observarán el movimiento en términos de píxeles lógicos en una dirección determinada.

Si el evento de movimiento se produce en su mayor parte de forma vertical, el reconocedor vertical declarará la victoria debido a los píxeles lógicos cruzados y, por tanto, el gesto se interpretará como un arrastre vertical en la pantalla. La misma serie de eventos puede repetirse también para los arrastres horizontales.

Si solo quieres reconocer los arrastres horizontales, entonces no importa si hay un componente vertical en el movimiento, solo se reconocerá el movimiento horizontal.

Codificación del procesamiento de eventos táctiles en Flutter

Cuando se trabaja en Android, se puede responder a los toques de los botones vinculando OnClick a través del setOnClickListener. Pero cuando se trata de Flutter, tienes la opción de dos métodos diferentes para añadir un listener táctil.

Si el widget soporta el uso de receptores entonces puedes pasar una función callback para procesar el evento. Aquí hay un ejemplo de código para el parámetro onPressed y RaisedButton:

Y así es como se vería en tu aplicación.

onPressed action on a widgetonPressed action on a widgetonPressed action on a widget

Ejemplo de GestureDetector

Sin embargo, a menudo querrás utilizar un receptor que no esté ya soportado por el widget. Cuando un receptor no es soportado directamente por el widget, puedes envolver ese widget en GestureDetector y pasar el manejador al parámetro onTap en su lugar. Así es como se hace:

Y este es el aspecto que tendrá la aplicación:

onTap action on a widget with GestureDetectoronTap action on a widget with GestureDetectoronTap action on a widget with GestureDetector

Ejemplo de animación con doble toque

He aquí otro ejemplo de reacción a un evento táctil para un doble toque en el logotipo de Flutter que provoca una rotación visual.

onDoubleTap action on a widget with GestureDetectoronDoubleTap action on a widget with GestureDetectoronDoubleTap action on a widget with GestureDetector

¿Te preguntas cómo escuchar el evento de doble toque? Así es como se hace:

Reflexiones finales

Reaccionar a los eventos táctiles en Flutter no es tan complicado como cabría suponer. Entender la naturaleza de los widgets y su capacidad para escuchar es la primera lección que necesitas. Y todo lo demás sigue sin problemas a partir de ahí.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.