How to make InkWell `onLongPress()` override tap on a TextField inside of it?

user_12320704 0
Viewed 851

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(),
  ),
),

screenshot

dart flutter
3 Answers

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,
                    ),
                  ),
                ),
              )
user_104884440

@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.

user_123207040

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
      ),
    ),
  ),
),
user_173629520
Related