Comment changer le clavier dans un TextField Flutter ?

Pierre Courtois

Changer le clavier d’un textfield permet d’améliorer l’expérience utilisateur en lui simplifiant l’accès aux caractères dont il a besoin et en évitant les entrées erronées. Dans ce guide, je vous explique comment utiliser la propriété keyboardType du widget TextField.

Changer le clavier de votre Texfield dans Flutter

Flutter permet de personnaliser le type de clavier affiché pour un TextField grâce à la propriété keyboardType. Cette propriété ajuste le clavier en fonction du contenu attendu, ce qui améliore l’expérience utilisateur et évite des entrées erronées.

Pour spécifier un type de clavier dans un TextField, vous devez utiliser la propriété keyboardType, qui accepte une valeur de type TextInputType. Voici comment cela fonctionne :

TextField(
  keyboardType: TextInputType.text, // Exemple de type de clavier
  decoration: InputDecoration(
    labelText: 'Entrer du texte',
  ),
)

Types de claviers disponibles

Voici les types de claviers pris en charge par Flutter.

Clavier de texte standard

Ce clavier est adapté à l’entrée de texte générique.

TextField(
  keyboardType: TextInputType.text,
  decoration: InputDecoration(
    labelText: 'Nom',
  ),
)

Clavier pour les nombres

Utilisez TextInputType.number pour afficher un clavier numérique. Utile pour les champs comme les prix ou les quantités.

TextField(
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    labelText: 'Entrez un nombre',
  ),
)

Clavier pour les numéros de téléphone

Pour les champs de numéro de téléphone, utilisez TextInputType.phone.

TextField(
  keyboardType: TextInputType.phone,
  decoration: InputDecoration(
    labelText: 'Numéro de téléphone',
  ),
)

Clavier pour les adresses email

Le clavier pour les adresses email inclut le symbole @ pour simplifier la saisie.

TextField(
  keyboardType: TextInputType.emailAddress,
  decoration: InputDecoration(
    labelText: 'Adresse email',
  ),
)

Clavier pour les URLs

Pour les champs URL, ce type de clavier propose des caractères comme / et ..

TextField(
  keyboardType: TextInputType.url,
  decoration: InputDecoration(
    labelText: 'Site web',
  ),
)

Clavier multiligne

Ce type de clavier permet aux utilisateurs de saisir du texte sur plusieurs lignes.

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null, // Permet plusieurs lignes
  decoration: InputDecoration(
    labelText: 'Description',
  ),
)