In Flutter, to perform gesture operations there are different methods for different widgets. But to use gestures globally for any widget there are majorly these two widgets Gesture Detector and Ink Well.
If we deep dive into the core of these two widgets, we will find a very minor difference between them. But first, let's take an overview of these two widgets.
Gesture Detector
Gesture Detector is a widget which enables its child widget to perform gesture actions. There are a few types of gestures available in this widget like:
onTap: for single click/touch.
onDoubleTap: for a double tap on the context.
onLongPress: to hold the context for a couple of seconds.
and much more...
GestureDetector(
onTap: () {
print("Single clicked using GestureDetector");
},
onDoubleTap: () {
print("Double clicked using GestureDetector");
},
onLongPress: () {
print("Long pressed using GestureDetector");
},
child: const Text(
"Clicked using GestureDetector",
style: TextStyle(
color: Colors.cyan,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
);
Ink Well
Ink well is a widget which also enables its child widget to perform gesture actions but with a style which includes a splash on click which can be customized according to context need and the better user experience. There are majorly the same gestures as the GestureDetector.
InkWell(
onTap: () {
print('Single clicked using ink well');
},
onDoubleTap: () {
print('Double clicked using ink well');
},
onLongPress: () {
print('Long pressed using ink well');
},
mouseCursor: MouseCursor.defer,
splashColor: Colors.green,
borderRadius: BorderRadius.circular(10),
child: Text('Clicked using Ink Well'),
);
Difference between Gesture Detector and Ink Well
| Gesture Detector | Ink Well |
| Does not gives a splash or ripple effect on click. | Gives an attractive splash or ripple effect on click. |
| Provides only callback functions for the gestures | Provides callback functions along with the styling of the parent widget i.e. ink well. |
| The gesture area is limited to the dimensions of the child widget | The gesture area is a rectangle which will be expanded to the flexible area provided. |
| Does not provide a way to customize the cursor type on hover | Provides an argument to customize the cursor type |
Where to use
As we can see that both the widgets are functions equally with a few differences i.e. in the styling of widgets but we also need to understand the basic use case of both widgets.
For example:
If we are creating an application in which we want to implement the like feature which is done by double-clicking the screen, then for this scenario we can use Gesture Detector because when we double-click, we want to show some icon or text that ensures the image/post is liked without any other animation, but if we use ink well then, there will appear a splash or ripple of colour (default: white) on the context which will not look that good.
If we are creating a custom button or a custom tile then we can use Ink well. Say, we have a custom tile which has two actions, first - on a single tap it navigates to another page, second - on a long press it shows a popup to perform some actions like delete, edit etc... then we should use ink well as it will create a ripple/splash effect which will let the user know that on clicking or pressing on that tile is leading to do that action.
These are the most basic use cases of both the widgets. Use case can be a much more vast.
Thank you
Ashutosh Kapoor