Flutter Pro Design

Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Dismiss the keyboard when users scroll a form

An open keyboard covers the bottom half of the screen until the user closes it. Often they're already finished with the field. They just want to scroll down and see the rest, but the keyboard stays in the way. You can treat that scroll as "I'm done here" and close it for them.

Every scrollable (ListView, SingleChildScrollView, CustomScrollView, GridView) takes a keyboardDismissBehavior. Set it to onDrag:

ListView(
  keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
  children: [
    // your fields
  ],
)

Now the moment the user starts scrolling, the field unfocuses and the keyboard slides away:

When to use it, and when not:

  • Long forms. The user fills a field, then swipes down to the next. Profile edit, registration, and the like.
  • Search. The user types, then scrolls the results. Scrolling means they're reading results, not typing.
  • Short forms too. Even one field is enough. When there's something below it, the user scrolls down to see it, and the keyboard gets out of the way.

Skip it in chat. Here scrolling means the opposite. The user taps the message field, starts typing, then scrolls up to find an old message. With onDrag that scroll closes the keyboard and cuts off what they were writing. Chat wants the keyboard to stay while you look around, so leave it on manual.

The rule: use onDrag when scrolling means the user is done with the field and wants to see what's below. Use manual when they scroll while still typing.