How To Make Any Widget Clickable In Flutter

First Solution: Using a GestureDetector Widget

A widget that recognizes gestures. Attempts to recognize gestures that match non-zero callbacks. If this widget has children, they will be moved to that child for the behavior of that size. If you don’t have children, you will grow up to be a parent instead. By default, GestureDetectors with hidden children ignores touches. This behavior can be controlled by Behavior. GestureDetector listens for accessibility events and maps them to callbacks. To ignore accessibility events, set excludeFromSemantics to true.

Sample Code:

child: GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
      ///
},

Second Solution: Using A GestureDetector Widget

InkWell is Flutter’s material widget. Responds to user touch operations. When the user clicks the button, Inkwell responds. There are numerous gestures such as double-tap, long press, down tap, and so on. Below are many features of this widget. You can also set the radius of the Inkwell widget with radius and the border-radius with borderRadius. You can color the splash with splashColor and you can do a lot.

The following diagram shows how an InkWell looks when tapped when using default values.

The highlight is a rectangle the size of the box.

Sample Code:

InkWell(
   onTap() {         
      print('click);
   },
   child: ...
},

References:

https://api.flutter.dev/flutter/material/InkWell-class.html

https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

Leave a Comment

Your email address will not be published. Required fields are marked *