GestureDetector es un widget de Flutter que se utiliza para detectar gestos en una pantalla táctil. Al renderizar un GestureDetector, el widget captura los gestos del usuario, como toques, arrastres, desplazamientos, aumento/reducción de zoom y gestos de doble toque. Luego, puede tomar diferentes acciones según el tipo de gesto que se haya capturado.
Puede configurar un GestureDetector para responder a un gesto específico o a varios gestos simultáneamente. Por ejemplo, puede configurar un GestureDetector para responder a un solo toque o tap, o para detectar los gestos de deslizamiento tanto vertical como horizontal. Además, los gestos también se pueden personalizar para que realicen diferentes acciones según el tipo de interacción que el usuario esté intentando realizar.
Como bien sabrás, en Flutter tenemos todo tipo de widgets que podemos emplear para distintos propósitos; algunos son más útiles que otros y otros son más visuales e interactuar con nuestro usuario; una sorpresa es que widgets como textos, imágenes, chips, etc NO cuenten con una propiedad o evento para manejar el click, tap, o press, como lo quieras llamar; ya que de esta manera no tenemos una manera en la cual podemos interactuar con el toque que nuestro usuario hace en la pantalla sobre uno de estos componentes, es decir, el evento click.
Creando nuestro detector de gestos
Por suerte, Flutter cuenta con un widget que nos permite detectar múltiples tipos de eventos, como el onpress (no click) y con esto podemos interactuar con nuestro usuario.
Existen múltiples tipos de gestos que podemos configurar, todas ellas las podemos configurar mediante propiedades como para el doble toque, los swipe, etc; mediante el GestureDetector.
Configurando el GestureDetector con la propiedad onTap
El uso de este widget es muy fácil, simplemente tenemos que embeber el widget que queremos hacer interactuar con nuestro usuario (el evento click/onTap) en el GestureDetector y listo; por ejemplo, tenemos un widget de tipo CircleAvatar:
CircleAvatar(
backgroundColor: Color(int.parse(chipModel.colorIcon, radix: 16)),
child: Icon(Icons.access_alarm),
), //Text("AC")
label: Text(chipModel.label, style: TextStyle(color: Color(int.parse(chipModel.colorIcon, radix: 16))),),
)Y para agregar el gesto Tap:
return GestureDetector(
onTap: () {
print("Container clicked");
},
child: Chip(
backgroundColor: Color(int.parse(chipModel.colorBg, radix: 16)),
avatar: CircleAvatar(
backgroundColor: Color(int.parse(chipModel.colorIcon, radix: 16)),
child: Icon(Icons.access_alarm),
), //Text("AC")
label: Text(chipModel.label, style: TextStyle(color: Color(int.parse(chipModel.colorIcon, radix: 16))),),
)
);
}Este widget, el GestureDetector, tiene otra propiedad que debemos de implementar llamada onTap, que viene siendo equivalente con el click, y como puedes adivinar, viene siendo una función que nos permite detectar los eventos o gestos, la función del evento click o tap de nuestro usuario o cualquier otra; de tal manera que de esta forma puedes agregar el evento clic a cualquier widget.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter