Mobiele ontwikkeling met Flutter · Les

Focus, toetsenbord en input-UX

Verfijn uw Flutter-formulieren door focus, toetsenbordtypen, inputacties en toegankelijkheid te beheren voor een soepele type-ervaring.

Les 4 van 413 stappen

Focus, toetsenbord en input-UX is een gratis Mobiele ontwikkeling met Flutter-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Mobiele ontwikkeling met Flutter. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Waarom invoer-UX belangrijk is

Een werkend formulier is niet genoeg — gebruikers verwachten dat het toetsenbord, de focusvolgorde en acties moeiteloos aanvoelen. In deze les leer je hoe je formulieren verfijnt.

De basis van FocusNode

Een FocusNode vertegenwoordigt de focusstatus van een veld. Maak er één aan per veld dat je wilt besturen.

final emailFocus = FocusNode();
final passwordFocus = FocusNode();

Focus koppelen

Geef de node door aan een TextField via de eigenschap focusNode.

TextField(
  focusNode: emailFocus,
  decoration: const InputDecoration(labelText: 'Email'),
);

Focus programmatisch verplaatsen

Vraag focus aan voor het volgende veld wanneer de gebruiker het huidige veld indient.

TextField(
  focusNode: emailFocus,
  onSubmitted: (_) => FocusScope.of(context).requestFocus(passwordFocus),
);

Toetsenbordtypen

Kies het juiste keyboardType, zodat het toetsenbord bij het veld past.

TextInputType.emailAddress
TextInputType.number
TextInputType.phone

TextField(
  keyboardType: TextInputType.emailAddress,
);

Invoeracties

De eigenschap textInputAction bepaalt de actieknop van het toetsenbord — Volgende, Gereed, Zoeken en meer.

TextField(
  textInputAction: TextInputAction.next,
);

Wachtwoorden verbergen en tonen

Gebruik obscureText voor wachtwoorden en een pictogram achteraan om de zichtbaarheid te wisselen.

TextField(
  obscureText: hidden,
  decoration: InputDecoration(
    suffixIcon: IconButton(
      icon: Icon(hidden ? Icons.visibility : Icons.visibility_off),
      onPressed: () => setState(() => hidden = !hidden),
    ),
  ),
);

Invoerformatters

inputFormatters beperken of transformeren invoer — bijvoorbeeld zodat alleen cijfers zijn toegestaan.

TextField(
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
);

Het toetsenbord verbergen

Verwijder de focus om het toetsenbord te verbergen wanneer de gebruiker ergens anders tikt.

GestureDetector(
  onTap: () => FocusScope.of(context).unfocus(),
  child: const FormBody(),
);

Overlapping met het toetsenbord voorkomen

Plaats je formulier in een schuifbaar element, zodat velden niet achter het toetsenbord verborgen raken. Een SingleChildScrollView regelt dit automatisch.

SingleChildScrollView(
  padding: const EdgeInsets.all(16),
  child: Column(children: fields),
);

Focusnodes opruimen

FocusNodes zijn resources — ruim ze op om lekken te voorkomen.

@override
void dispose() {
  emailFocus.dispose();
  passwordFocus.dispose();
  super.dispose();
}

Korte controle

Welke eigenschap zorgt ervoor dat de knop rechtsonder op het toetsenbord Volgende zegt?

Beantwoord dit in de interactieve les

Samenvatting

Je hebt invoer-UX verfijnd:

FocusNode en focus verplaatsen bij indienen
keyboardType en textInputAction
Wachtwoordwisselaars en invoerformatters
Het toetsenbord verbergen en overlapping voorkomen

Deze details maken van een functioneel formulier een geweldig formulier.

Gratis beginnen

Leer Dart met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Focus, toetsenbord en input-UX” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Mobiele ontwikkeling met Flutter, waaronder “Focus, toetsenbord en input-UX”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Wat leer ik in “Focus, toetsenbord en input-UX”?

Verfijn uw Flutter-formulieren door focus, toetsenbordtypen, inputacties en toegankelijkheid te beheren voor een soepele type-ervaring. Je oefent met Mobiele ontwikkeling met Flutter door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Mobiele ontwikkeling met Flutter te beginnen?

Ervaring vooraf is niet nodig. Mobiele ontwikkeling met Flutter op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Focus, toetsenbord en input-UX”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Mobiele ontwikkeling met Flutter?

Ja. Elke les over Mobiele ontwikkeling met Flutter bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Mobiele ontwikkeling met Flutter