GestureDetector is a Flutter widget used to detect gestures on a touch screen. By rendering a GestureDetector, the widget captures user gestures such as taps, drags, scrolls, zoom in/out, and double-tap gestures. You can then take different actions depending on the type of gesture that was captured.
You can configure a GestureDetector to respond to a specific gesture or to multiple gestures simultaneously. For example, you can configure a GestureDetector to respond to a single tap, or to detect both vertical and horizontal swipe gestures. Additionally, gestures can also be customized to perform different actions depending on the type of interaction the user is attempting to perform.
As you well know, in Flutter we have all kinds of widgets that we can use for different purposes; some are more useful than others and others are more visual and interact with our user; one surprise is that widgets such as texts, images, chips, etc. DO NOT have a property or event to handle the click, tap, or press, whatever you want to call it; since in this way we do not have a way in which we can interact with the touch that our user makes on the screen on one of these components, that is, the click event.
Creating our gesture detector
Luckily, Flutter has a widget that allows us to detect multiple types of events, such as onpress (no click) and with this we can interact with our user.
There are multiple types of gestures that we can configure, we can configure all of them through properties such as double touch, swipe, etc; through the
GestureDetector.
Setting the GestureDetector with the onTap property
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))),),
)And to add the Tap gesture:
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))),),
)
);
}This widget, the GestureDetector, has another property that we must implement called onTap, which is equivalent to the click, and as you can guess, it is a function that allows us to detect events or gestures, the click or tap event function of our user or any other; so that this way you can add the click event to any widget.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter