The detail to make better form

Tired of the Keyboard Staying Open?

It can be really annoying when you're using an app with form fields, and you tap somewhere outside the text box, expecting the keyboard to disappear, but it just... stays. This isn't a great user experience.

The Simple Solution

There's an easy way to fix this common issue and make your forms feel much smoother.

Wrap Your Content

The trick is to wrap the main part of your screen (like your Scaffold's body) inside a GestureDetector widget.

Add the Dismiss Logic

Inside the GestureDetector, use the onTap property. Set it to a function that calls FocusScope.of(context).unfocus(). This tells the app to remove focus from whatever widget currently has it, which will close the keyboard if a text field was focused.

GestureDetector(
  onTap: () => FocusScope.of(context).unfocus(),
  child: // Your page content goes here
)

By doing this, any tap outside of a focused text field within that area will trigger the onTap and dismiss the keyboard automatically. It's a small detail, but it makes a big difference in how your forms feel to the user.

Save 3 months of work

Create your app using our 6 years of making Flutter apps and more than 50+ apps

Frequently Asked Questions

How do I make the keyboard disappear when tapping outside in Flutter?

Wrap your page content in a `GestureDetector` and use `FocusScope.of(context).unfocus()` in the `onTap` property.

What is GestureDetector used for?

GestureDetector is used to detect various gestures like taps, drags, and scrolls on a widget.

What does FocusScope.of(context).unfocus() do?

It removes the focus from the widget that currently has it, which is useful for dismissing the keyboard attached to a text field.

Why is dismissing the keyboard important?

Automatically dismissing the keyboard improves the user experience by making forms easier and more intuitive to use.