Focus, Keyboard & Input UX
Polish your Flutter forms by managing focus, keyboard types, input actions and accessibility for a smooth typing experience.
Focus, Keyboard & Input UX is a free Flutter Mobile Development lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Flutter Mobile Development learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Input UX Matters
A working form is not enough — users expect the keyboard, focus order and actions to feel effortless. This lesson covers the polish that makes forms delightful.
FocusNode Basics
A FocusNode represents the focus state of a field. Create one per field you want to control.
final emailFocus = FocusNode();
final passwordFocus = FocusNode();Attaching Focus
Pass the node to a TextField via the focusNode property.
TextField(
focusNode: emailFocus,
decoration: const InputDecoration(labelText: 'Email'),
);Moving Focus Programmatically
Request focus on the next field when the user submits the current one.
TextField(
focusNode: emailFocus,
onSubmitted: (_) => FocusScope.of(context).requestFocus(passwordFocus),
);Keyboard Types
Pick the right keyboardType so the keyboard matches the field.
TextInputType.emailAddressTextInputType.numberTextInputType.phone
TextField(
keyboardType: TextInputType.emailAddress,
);Input Actions
The textInputAction controls the keyboard's action button — Next, Done, Search and more.
TextField(
textInputAction: TextInputAction.next,
);Obscuring & Toggling Passwords
Use obscureText for passwords, and a suffix icon to toggle visibility.
TextField(
obscureText: hidden,
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(hidden ? Icons.visibility : Icons.visibility_off),
onPressed: () => setState(() => hidden = !hidden),
),
),
);Input Formatters
inputFormatters restrict or transform input — for example digits only.
TextField(
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
);Dismissing the Keyboard
Unfocus to dismiss the keyboard when the user taps elsewhere.
GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: const FormBody(),
);Avoiding the Keyboard Overlap
Wrap your form in a scrollable so fields are not hidden behind the keyboard. A SingleChildScrollView handles this automatically.
SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(children: fields),
);Disposing Focus Nodes
FocusNodes are resources — dispose them to avoid leaks.
@override
void dispose() {
emailFocus.dispose();
passwordFocus.dispose();
super.dispose();
}Quick Check
Which property sets the keyboard's bottom-right button to say Next?
Recap
You polished input UX:
- FocusNode and moving focus on submit
- keyboardType and textInputAction
- Password toggles and input formatters
- Dismissing the keyboard and avoiding overlap
These details turn a functional form into a great one.
Frequently asked questions
Is the “Focus, Keyboard & Input UX” lesson free?
Yes — the full text of “Focus, Keyboard & Input UX” is free to read here on the web, and the Flutter Mobile Development course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Flutter Mobile Development course, upgrade to CoddyKit PRO.
What will I learn in “Focus, Keyboard & Input UX”?
Polish your Flutter forms by managing focus, keyboard types, input actions and accessibility for a smooth typing experience. You practise Flutter Mobile Development with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Flutter Mobile Development?
No prior experience is required. Flutter Mobile Development on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Focus, Keyboard & Input UX” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Flutter Mobile Development lesson?
Yes. Every Flutter Mobile Development lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Form Widget & Controllers
- Input Validation Techniques
- Custom Form Fields
- Focus, Keyboard & Input UX