'How to make InkWell `onLongPress()` override tap on a TextField inside of it?
I have a TextField
inside of an InkWell
with an onLongPress()
callback. The problem is, despite the fact that even when long pressing on the TextField
, I see the ripple effect on InkWell
, but the onLongPress()
does not run after the long press time passes. It only gets me into editing Text. When pressing on the bottom side of the Card
, everything runs fine.
In short: On tap I want to get into TextField
editing. On long press I want to trigger the onLongPress()
, not the TextField
, even if I am pressing on it.
How do I do this? Thank you.
InkWell(
onLongPress: () {
// do stuff
}
child: ListTile(
title: TextField(),
),
),
Solution 1:[1]
You can use the AbsorbPointer widget to ignore the TextField
gesture recognizer:
InkWell(
onLongPress: () {
print('onLongPress');
},
child: AbsorbPointer(
child: ListTile(
title: TextField(),
),
),
)
To still enabling the editing of TextField
when single tapping on it, you can use FocusNode
like this:
InkWell(
onLongPress: () {
print('onLongPress');
},
onTap: () => node.requestFocus(),
child: AbsorbPointer(
child: ListTile(
title: TextField(
focusNode: node,
controller: textController,
),
),
),
)
Solution 2:[2]
@Bach 's answer helped me to find a solution. Thank you!
InkWell(
onLongPress: () {
// do stuff
},
child: ListTile(
title: GestureDetector(
onTap: () => FocusScope.of(context).requestFocus(_focusNode),
child: AbsorbPointer(
child: TextField(
focusNode: _focusNode,
),
),
),
),
The only problem is now that I started messing with focusNode
, multiple input fiels are focusing at the same time. But that is a whole other story ;)
UPD: Just realised, that I can't move text cursor this way. So not useful.
Solution 3:[3]
It seems that IntrinsicWidth
widget can find the right balance between long press and text editing.
The rationale behind is that IntrinsicWidth
will let the TextField
shrink to its minimum width, therefore avoiding a gesture collision with the InkWell
So your solution can be like this:
InkWell(
onLongPress: () {
// do stuff
}
child: ListTile(
child: IntrinsicWidth(
title: TextField(
//remember to make some hints here
//because with intrinsicwidth if your textfield is empty it might disappear
),
),
),
),
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Bach |
Solution 2 | |
Solution 3 | Linloir |