Focus, tastiera ed esperienza di input
Rifinisca i form Flutter gestendo focus, tipi di tastiera, azioni di input e accessibilità per un’esperienza di digitazione fluida.
Focus, tastiera ed esperienza di input è una lezione Flutter Mobile Development gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Flutter Mobile Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Flutter Mobile Development include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Impara Dart con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 22
- Lezioni
- 88
Domande Frequenti
La lezione «Focus, tastiera ed esperienza di input» è gratuita?
Sì — il testo completo di «Focus, tastiera ed esperienza di input» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Flutter Mobile Development, passa a CoddyKit PRO. Il corso Flutter Mobile Development include 4 lezioni in totale.
Cosa imparerò in «Focus, tastiera ed esperienza di input»?
Rifinisca i form Flutter gestendo focus, tipi di tastiera, azioni di input e accessibilità per un’esperienza di digitazione fluida. Eserciti Flutter Mobile Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Flutter Mobile Development?
Non è richiesta alcuna esperienza precedente. Flutter Mobile Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Focus, tastiera ed esperienza di input»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Flutter Mobile Development?
Sì. Ogni lezione Flutter Mobile Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Widget Form e controller
- Tecniche di validazione degli input
- Campi di modulo personalizzati
- Focus, tastiera ed esperienza di input