Flutter Mobile Development · Lektion

Fokus, Tastatur und Eingabe-UX

Optimieren Sie Ihre Flutter-Formulare, indem Sie Fokus, Tastaturtypen, Eingabeaktionen und Barrierefreiheit für ein reibungsloses Tipperlebnis verwalten.

Fokus, Tastatur und Eingabe-UX ist eine kostenlose Flutter Mobile Development-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Flutter Mobile Development-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Flutter Mobile Development-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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.emailAddress
TextInputType.number
TextInputType.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.

Häufig gestellte Fragen

Ist die Lektion „Fokus, Tastatur und Eingabe-UX“ kostenlos?

Ja — der vollständige Text von „Fokus, Tastatur und Eingabe-UX“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Flutter Mobile Development-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Flutter Mobile Development-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Fokus, Tastatur und Eingabe-UX“?

Optimieren Sie Ihre Flutter-Formulare, indem Sie Fokus, Tastaturtypen, Eingabeaktionen und Barrierefreiheit für ein reibungsloses Tipperlebnis verwalten. Du übst Flutter Mobile Development mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Flutter Mobile Development zu starten?

Keine Vorkenntnisse erforderlich. Flutter Mobile Development auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Fokus, Tastatur und Eingabe-UX“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Flutter Mobile Development-Lektion Code schreiben und ausführen?

Ja. Jede Flutter Mobile Development-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Flutter Mobile Development