Detect a tap outside of a TextField to unfocus

Question

I want to hide the keyboard when the user taps outside of a TextField. My current solution is to listen to taps in a GestureDetector that wraps the screen and call FocusScope.of(context).unfocus() to hide the keyboard.

The problem is that the GestureDetector doesn't detect taps on widgets like buttons. So when a button is tapped, the keyboard doesn't hide.

Portmanteau

Then make a button using Container and wrap it inside your GestureDetector. Is that what you're looking for? – Glossography

you're facing same problem as I do... #62426482 Look at my answer there.. It is a solution however a bit buggy.. I have filed an issue for that but for now is the only way to add the unfocused in all buttons – Alphonsealphonsine

@Glossography The button works alright. The problem is that the button "steals" touches from the GestureDetector, which is supposed to hide the keyboard on touches outside a text field. – Portmanteau

@Alphonsealphonsine Not sure if this would work correctly when there are multiple text fields. Tapping them should not hide the keyboard. Ideally, the gesture detector should detect taps on widgets that are not focusable. – Portmanteau

@Portmanteau it works with multiple text fields. Give it a try and let me know. Problem is that it throw error when taping on selected field.. well I spent long time with it and this was the only solution I have found. Wish there is another – Alphonsealphonsine

@Alphonsealphonsine It kind of works. Not exactly the behavior I wanted but similar. The keyboard hides on touch down (not up) and when I tap on a different text field, the keyboard hides and show again instead of staying intact. – Portmanteau

@Portmanteau that is as close as I could get. Did you get also errors in your ide when taped on already selected field? Please let me know if you find something better. – Alphonsealphonsine

I'm getting a NSLayoutConstraint error in the iPhone simulator. If I had the time I would probably try to create a custom widget which detects taps on focusable widgets, perhaps by overriding the hitTest method in RenderBox. – Portmanteau

Same as me... Well I think it is a bug and onTapDown is the way to go unless they add some other parameter into Gesture detector.. The stable channel has a lot of bugs specially with text field.. For example try to use multiple text field in landscape mode and change focus with next button on your keyboard.. Perhaps it would be good idea to request a feature for that. – Alphonsealphonsine

Answer 1

Since Button widgets handles their own gesture, you can just add FocusScope.of(context).unfocus() on your buttons' onPressed()

ElevatedButton(
  onPressed: () {
    // Unfocus from any focused TextField
    FocusScope.of(context).unfocus();
    // Do button function
  },
  child: Text('...'),
)

Caretaker

Answer 2

The onTapOutside property in a TextField allows you to easily dismiss the focus from the text field and hide the keyboard with just a single line of code.

TextField(
      onTapOutside: (event) => FocusManager.instance.primaryFocus?.unfocus(),
)

Taluk