Flutter Pro Design

Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Newsletter? Nah, I hate them.

Follow me on and catch new details.

Autofocus pages that have one field

If a page exists to collect one input, focus that field when the page opens. The user navigated here to type, and there is nothing else on the screen to tap first. The OTP page, the phone number on registration page, change email page, they all share this: one field, one job.

Watch how smooth it feels, the keyboard stays focused the whole way from the phone number to the OTP, no tapping in between:

Just set autofocus to your field:

TextField(
  autofocus: true,
  keyboardType: TextInputType.phone,
)

The keyboard is up, the cursor is in. The user types and moves on, no extra tap.

OTP is the clearest case, because it has a single purpose. Example using pinput:

Pinput(
  autofocus: true,
  length: 4,
  onCompleted: (pin) => _verify(pin),
  closeKeyboardWhenCompleted: false,
)

onCompleted fires on the last digit, so submit there. Don't make the user reach for a "Continue" button that the code could press itself.

Don't forget closeKeyboardWhenCompleted: false. Pinput drops the keyboard on complete by default, so a wrong code leaves the user retyping with the keyboard already gone.

And skip the "tap outside to dismiss the keyboard" gesture here. There is nothing else to reach, and dropping the keyboard only adds a tap to bring it back.

One caveat: only when the field is the only choice on the page.

Do: a page with just the input. OTP, change phone, change email.

Don't: a login page with an email field plus Google and Apple sign in. The keyboard opens over those buttons, and you've hidden the options the user might have picked instead.

The rule: when the page is the field, treat it that way. Focused on open, submitted on complete, keyboard stays.