HeadlinesBriefing favicon HeadlinesBriefing.com

Flutter iOS Keyboard Dismissal: A Reusable Done Button

DEV Community •
×

Flutter developers often overlook how iOS users dismiss the keyboard on text‑heavy screens. Unlike Android, iOS keyboards lack a visible “Done” button for multiline or numeric fields, forcing users to tap outside or scroll. A custom overlay that places a Done button just above the keyboard solves this friction.

The article explains why the feature matters—multiline fields, numeric keyboards, and bottom sheets all suffer when the keyboard blocks critical UI. It then shows how to implement the overlay with a reusable KeyboardDoneOverlayMixin. By attaching the mixin to a page’s focus node, the mixin automatically inserts an OverlayEntry when the field gains focus, aligns it using `MediaQuery.of(context).viewInsets.bottom`, and removes it when focus is lost or the button is tapped.

The solution runs only on iOS, keeping Android and web untouched. Developers can extend the overlay with animations, navigation buttons, or shortcuts, but the core mixin keeps the widget tree clean and the codebase maintainable.